0

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.

enter image description 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.

Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86

1 Answers1

4

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]
  );
Erfan HosseinPoor
  • 1,049
  • 7
  • 9
  • 1
    Thank you, unfortunately the functionality of the headers checkbox don't update the others in the table as it should, by clicking the headers checkbox it should be able to select and deselect all from the table, hope that makes sense – Ricardo Sanchez Aug 05 '21 at 07:44
  • Ok, i found a new way, remove the last changes and just add [prepareRow, rows, selectedRowIds] as your RenderRow callback dependencies – Erfan HosseinPoor Aug 05 '21 at 08:37
  • Mind explaining why that addition to the dependencies made the difference? – Ricardo Sanchez Aug 05 '21 at 09:12
  • 1
    It uses a callback to render your new data and pass it to FixedSizeList, your callback work with some dependencies, when your dependencies are changing your data will update. In this case, you don't pass your selected list as dependency and your data don't know about the changes. – Erfan HosseinPoor Aug 05 '21 at 09:17
  • My pleasure, my friend. – Erfan HosseinPoor Aug 05 '21 at 09:21
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235651/discussion-between-erfan-hosseinpoor-and-ricardo-sanchez). – Erfan HosseinPoor Aug 05 '21 at 09:22