We have a requirement to show blue background for the row, If it is selected.
But Combination of onCellSelected and rowRenderer slowing the Grid performance.
If we keep pressing down the arrow down/up keyboard key into the grid, you will be able to see the lag.
It would be so great, If somebody helps us in optimizing this grid or some suggestions atleast?
We are using
"react-data-grid": "6.0.1" and cannot upgrade to latest due to some breaking dependencies
PS: Tried wrapping rowRenderer in useCallback but it's prevent the grid from showing that blue background for selected row.
You can fix it by making the row renderer a static component, and pass
currentRowIndex via context instead.
Thank you so much @nstepien. The solution is perfect and the rows are having the blue bg without performance issues.
however, If you see, there are checkboxes we have for every rows and it should get selected when we press space key on keyboard.
Behind the scene it is getting selected but not reflected in UI immediately, need to scroll that row out of the screen and scroll back to it to see the checkbox being tick.
Codesandbox with space key event attached: https://codesandbox.io/s/rdg-with-blue-row-bg-static-rowrenderer-3vkwif
Any suggestions will be greatly appreciated!
Used default checkbox from RDG and it worked. We where using custom column formatter to create checkboxes.
Update: custom column formatter is also working. We where using defaultChecked, It should be checked
Anyway, Thanks @nstepien
|Issue Title||Created Date||Updated Date|