Our blazing fast Grid component built with pure JavaScript


Post by branden »

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.

Screenshot from 2021-10-19 19-59-28.png
Screenshot from 2021-10-19 19-59-28.png (79.27 KiB) Viewed 1223 times

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?


Post by saki »

Would you please put your code and data in a runnable showcase that we can build, run and debug?


Post by Animal »

Just set the inline background color style to '' to reset it. It will go back to inheriting the background.

But this should really be done using CSS class names and your stylesheet.


Post Reply