There is a huge scroll performance issue if ag-grid is used with custom header component and custom cell renderers. We tried with about 10000 rows x 10000 columns. Without custom renderers, it is running smooth. Custom cell renderers is causing an overall performance issue and applying only custom header is causing horizontal scroll issue(vertical scroll is fine). We are using ag-grid-react. Is there any issue with ag-grid if used with other framework components instead of default components?
1 Answers
1
votes
We faced similar issues while using custom components in Editable ag-grid, even though our data was ~1000 rows and ~20 columns.
We gained a major bump in performance by porting our custom components from cell renderers to cell editors.
During this journey I studied about how ag-grid internally works and found out that by default virtualization is enabled in ag-grid, which means whenever you scroll, some of your components gets mounted and some gets un-mounted. If you consider it for lot of components, it's a really heavy operation.
Before trying the approaches discussed on official docs, I would recommend you to increase the rowBuffer and see if you gain any performance and if you're, like us, using some editable components as cell renderers then port those to cell editors.
The grid rendering is highly customised and plain JavaScript cell renderers will work faster than framework equivalents.- Paritosh