Hey team,
I believe I may have found a bug in cells using a custom renderer for their column. I have a grid defined as such:
<Grid
style={{ flex: 1, width: '100%' }}
gridRef={gridRef}
readOnly
columns={[
{ type: 'number', text: 'Shipped', field: 'SHIPPED_QUAN', tooltip: 'Shipped Quantity'},
{ type: 'number', text: 'Qty', field: 'QUAN', tooltip: 'Order Quantity'},
{ type: 'date', format: 'YYYY-MM-DD', text: 'Due Date', field: 'PROMISE_DATE', tooltip: 'Due Date'},
{ type: 'date', format: 'YYYY-MM-DD', text: 'SMT Due Date', field: 'SMT_DUE_DATE', tooltip: 'SMT Due Date'},
{ text: 'Panelization', field: 'NOA_PANELIZATION', tooltip: 'New Panelization', htmlEncode: false, align: 'center', renderer: newProcessCellRenderer },
{ text: 'Stencil', field: 'NOA_STENCIL', tooltip: 'New Stencil', htmlEncode: false, align: 'center', renderer: newProcessCellRenderer },
{ text: 'Program Verified Primary', field: 'SMT_PRIMARY_VERIFIED', tooltip: 'Programming is Verified for Primary SMT Line', htmlEncode: false, align: 'center', renderer: yesNoCellRenderer },
{ type: 'date', format: 'YYYY-MM-DD', text: 'Work Packet Release', field: 'WORK_PACKET_RELEASE', tooltip: 'Work Packet Release Date'},
{ type: 'date', format: 'YYYY-MM-DD', text: 'Work Packet Date', field: 'WORK_PACKET', tooltip: 'Work Packet Date'},
{ type: 'number', unit: 'd', text: 'Work Packet Different', field: 'WORK_PACKET_VARIANCE', tooltip: 'Days between Work Packet Release and Date', renderer: ({value}) => Math.round(value)},
{ text: 'SMT Ready', field: 'SMT_READY', tooltip: 'SMT Parts are Ready', htmlEncode: false, align: 'center', renderer: yesNoCellRenderer },
{ text: 'Non-SMT Ready', field: 'NON_SMT_READY', tooltip: 'Non-SMT Parts are Ready', htmlEncode: false, align: 'center', renderer: yesNoCellRenderer},
{ text: 'Wire Comp', field: 'WIRE_COMP_READY', tooltip: 'Wire Comp is Ready', htmlEncode: false, align: 'center', renderer: yesNoCellRenderer},
{ text: 'Parts List', field: 'SHORTAGE_STRING', tooltip: 'List of Parts in Shortage', tooltipRenderer: renderShortageList },
]}
data={data}
/>
Some columns I would like to highlight as Yes / No columns, so they use this custom renderer function:
function yesNoCellRenderer({ value, cellElement }) {
if (typeof value === 'undefined') {
return null;
// cellElement.style.backgroundColor = 'white';
// return <b/>;
} else {
if (value === "Y") {
cellElement.style.backgroundColor = '#07b901';
return <b>Yes</b>
} else if (value === 'empty') {
return null;
// cellElement.style.backgroundColor = 'white';
// return <b/>;
} else {
cellElement.style.backgroundColor = '#fa2828';
return <b>No</b>
}
}
}
The issue is that on first load, everything that is within view is rendered correctly, however if I scroll down, things initially outside of the view (and ostensibly unmounted from the DOM), display the custom colors, but do not display the text associated with them. Scrolling back up to the top, then scrolling them back into view displays them correctly.
Explicitly setting the return to be a blank white cell (as I have commented out) fixes this issue, but doesnt allow the cells to be highlighted when the row is moused over, and causes issues when grouping rows, as the text in the grouping header can be overridden.
Any thoughts?