Checkbox input not displaying properly in conjunction with React-Table & React-Window combo

Question

I am trying to combine the Row Selection and Virtualized Rows examples from React-table but the checkboxes don't render properly, the problem is that when you click on them you can see they activate but the tick mark does not appear until you scroll up or down, and the same happens when you deselect the checkbox.

I have a working example here.

I think it has to do with the way React-Window updates or re-render the divs but I'm clueless as of how to tackle this problem, any help will be much appreciated.

Answer 1

Your SelectCheckbox component props don't update correctly, you must add your selectedRowIds as a dependency to your RenderRow callback

const RenderRow = React.useCallback(
    ({ index, style }) => {
      const row = rows[index];
      prepareRow(row);
      return (
        <div
          {...row.getRowProps({
            style
          })}
          className="tr"
        >
          {row.cells.map((cell) => {
            return (
              <div {...cell.getCellProps()} className="td">
                {cell.render("Cell")}
              </div>
            );
          })}
        </div>
      );
    },
    [prepareRow, rows, selectedRowIds]
  );