Combination of onCellSelected and rowRenderer slowing the Grid performance

This issue has been tracked since 2022-09-15.

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.

Codesandbox: https://codesandbox.io/s/rdg-slow-with-blue-row-bg-3j1x3z

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.

nstepien wrote this answer on 2022-09-16

https://codesandbox.io/s/rdg-slow-with-blue-row-bg-forked-zs37dq

You can fix it by making the row renderer a static component, and pass currentRowIndex via context instead.

blessonabrahamah wrote this answer on 2022-09-17

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!

blessonabrahamah wrote this answer on 2022-09-23

Used default checkbox from RDG and it worked. We where using custom column formatter to create checkboxes.

Codesandbox: https://codesandbox.io/s/rdg-blue-row-static-rowrenderer-default-checkbox-9tuyqc

Update: custom column formatter is also working. We where using defaultChecked, It should be checked

Anyway, Thanks @nstepien

More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date