The grid is fast. However, the grid can also be configured and extended in many ways. This page explains how you can make the grid go faster.
React in Production Mode works faster than Dev Mode. Given the DOM complexity of the grid, React Production Mode will allow the grid to perform optimally without any overhead introduced by Dev Mode. Performance testing should be performed in Production Mode only.
Setting Expectations Copy Link
The grid can be as fast as demonstrated in the Demo. You can resize the demo application to the same size as the grid in your application by resizing the browser, then navigate around the grid (scroll, filter, etc.) and see how fast the demo grid is compared to your own implementation. If the demo grid is going faster, then there is room for performance improvements.
Check Cell Renderers Copy Link
The grid can be slowed down by custom Cell Renderers. To test this, remove all Cell Renderers from the grid and compare the speed again. If the grid does improve its speed by removing Cell Renderers, introduce the Cell Renderers one by one to find out which ones are adding the most overhead.
Defer Slow Cell Renderers Copy Link
If a cell renderer is identified as slow then it can be marked for deferred rendering. This is achieved by setting deferRender: true on its cellRendererParams. The grid will display a skeleton loading cell in place of the cell renderer until the user has stopped scrolling. This improves scrolling performance by not blocking the main thread with expensive calls to the real cell renderer.
For more details see: Defer Slow Cell Components.
If Possible, Avoid Cell Renderers Copy Link
Cell Renders result in more DOM. More DOM means more CPU processing to render, regardless of what JavaScript / Framework is used to generate the DOM.
Ask the question, do you really need the Cell Renderer?
If you are only manipulating the value rather than creating complex DOM, would a Value Getter or Value Formatter achieve what you want instead? Value Getters and Value Formatters do not result in more DOM.
Avoid Auto Height Copy Link
Auto Height Rows is a great feature that we love. However it also creates more complex DOM inside each Cell.
If you are looking for ways to squeeze performance, consider turning this feature off. As with all suggestions here, it is paramount you profile your own application with this suggestion to see how much of a difference it makes and if the trade off is worth it for your application.
Skip Rendering Off-Screen Grids Copy Link
If your application renders multiple grids and some are scrolled out of view, consider setting enableContentVisibilityAuto=true to apply the CSS content-visibility: auto property to the grid wrapper. This skips rendering work for off-screen grids. For pages with a large number of off-screen grids, including Master / Detail apps with many detail rows expanded, the improvement in frame-rate while scrolling can be an order of magnitude or more.
When content-visibility: auto is applied and the grid is off-screen, any attempt to measure the width or height of an element within the grid will result in zero. For this reason, we only apply the style after one second to give time for any initial measurements done by application code or by the grid through autoSizeStrategy to be carried out. This delay can be customised by passing a millisecond value to contentVisibilityAutoDelay.
However it can be even more effective to delay initialisation of off-screen grids altogether. enableContentVisibilityAuto prevents unnecessary rendering work on hidden grids, but these grids will still execute JavaScript and make network requests. Consider using an Intersection Observer to determine when your grids are about to scroll into view and initialising them just in time, then destroying them when they scroll out of view.
Configure Row Buffer Copy Link
The rowBuffer property sets the number of rows the grid renders outside of the viewable area. The default is 10. For example, if your grid is showing 50 rows (as that's all that fits on your screen without scrolling), then the grid will actually render 70 in total (10 extra above and 10 extra below). Then when you scroll, the grid will already have 10 rows ready and waiting to show, so the user will not see a redraw (not all browsers show the redraw, only the slower ones).
Setting a low row buffer will make initial draws of the grid faster (e.g. when data is first loaded, or after filtering, grouping, etc.). Setting a high row buffer will reduce the redraw visible vertically scrolling.
Debounce Vertical Scroll Copy Link
By default, there is no debouncing of the vertical scroll. However, in some rare circumstances, you may wish to debounce the vertical scroll so that the grid only scrolls after the user has finished updating the scroll position.
To debounce the vertical scroll, set grid property debounceVerticalScrollbar=true.
Disable Row Highlighting Copy Link
By default, rows are highlighted as the mouse hovers over them. As Row Highlighting works by the grid adding the CSS class ag-row-hover to each row getting hovered you may see an increase in scrolling performance by disabling this.
To disable row highlighting, set the grid property suppressRowHoverHighlight=true