5

I am trying to implement an editable data grid using react-table. The code looks something like below:

<ReactTable
  data={data}
  columns={columns}
/>

The problem I am facing is whenever a cell value in a specific row is updated the entire visible page is re-rendered.

Here is forked sandbox from the creator of the library that illustrates the problem.

I am thinking if react-table re-renders the entire page anytime there is an update in a single cell, then it is rather inefficient. Or I am not sure if I am missing something.

Any help us much appreciated. Thanks in advance!

Tholle
  • 108,070
  • 19
  • 198
  • 189
bp4D
  • 915
  • 12
  • 20

1 Answers1

1

First thing to note: just because you're logging "row render called" in the Cell callback does not necessarily mean that the DOM was re-rendered. It will only re-render if the output of render is different from the previous.

In this case it is different, for every row, because you're calculating a new Date for every row. You need a way to check which row is the one being updated and only return a new date for that one.

dpren
  • 1,225
  • 12
  • 18
  • 1
    When my testing my application I found that Cell function is called once per row, every time there is a change any where in the grid. Essentially, to prove that the entire page is re-rendered, I am using the timestamps as it was bit complex to debug in sandbox. – bp4D Jul 19 '18 at 17:47
  • I have gone through react-table source code and figured that it generates key for row-group div (trGroup). As a result only the rows that are "actually" updated are re-rendered. – bp4D Aug 13 '18 at 02:46