I know that this is a big topic, but I will ask/comment anyway. Others might benefit as well.
The selection logic that kendogrid uses is not performant enough.
On every selection basically everything is re-rendered:
- All rows. (GridRow)
- All cells for all rows. (GridCell)
- The header
- The toolbar
This works well enough when there are a few records - 10-20-50.
With more records the performance degrades too much.
To improve performance:
- I used React.memo for the cells
However, the rows (GridRow),header,toolbar are still re-rendered. When I have 100-200 and more records that's too much.
You provide virtual scrolling, but it has the following disadvantages:
1. You have to have a fixed row height. For my application this is too restrictive. I need to have variable row height.
2. You cannot use paging with virtual scrolling. (I might be able to hack a custom paging solution or do not use paging. But even then the fixed row height is too restrictive)
I am going in the direction of using something like react-visible, to detect which rows are off-canvas and avoid rendering them.
Do you have any other suggestions?
Do you plan on optimizing the grid performance? I can wait a few months for a better solution coming from you.
How can I override the GridRow component for the grid? There is a hook rowRender (or renderRow, don't remember). I tried returning a ReactNode from it, but it didn't work (the app crashes)? Can you please provide an example how can I do that?