Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Scrolling Performance

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 Dev vs Prod Mode

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.

Check the React Docs to learn how to check which mode React is running in.

Setting Expectations

The grid can be as fast as demonstrated in the demo application Demo Application. 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

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 it's speed by removing Cell Renderers, introduce the Cell Renderers one by one to find out which ones are adding the most overhead.

React or JavaScript Cell Renderers

In the past we recommended writing Cell Renderers in JavaScript for best performance, as the grid rendering WAS written in plan JavaScript (i.e. it was not using React). However this guidance has changed as since v27 of the grid, the grid now uses React for it's rendering engine. As such, there is no real advantage between using JavaScript or React for your Cell Renderers.

Given React and Plain JavaScript are different, you might wonder which one would be faster for your implementation. This is down to you, which one you prefer. The only thing we can say is we can't see why there would be a clear winner form the grid's point of view.

If Possible, Avoid Cell Renderers

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

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 turing 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 work it for your application.

Turn Off Animations

Row Animation and Column Animation make for a great user experience. However not all browsers are as good at animations as others. Consider checking the client's browser and turning off row and column animation for slower browsers.

Configure Row Buffer

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 the 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 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 (eg when data is first loaded, or after filtering, grouping etc). Setting a high row buffer will reduce the redraw visible vertically scrolling.

Use Chrome (or Chrome Powered Browser)

The grid works fastest on Google Chrome. If you can, tell your users.

This includes Microsoft Edge, which is now powered by Chrome.

Understand Data Updates

For fast changing data, consider using Batch Update Transactions which allows the grid to take very large amounts of updates without bringing the browser to a crawl. This is also demonstrated in the blog Streaming Updates in JavaScript Datagrids that shows hundreds of thousands of updates per second.

Debounce Vertical Scroll

By default, there is no debouncing of the vertical scroll. However on slow browsers, especially IE, depending on your application, you may wish to debounce the vertical scroll.

To debounce the vertical scroll, set grid property debounceVerticalScrollbar=true.

The example below demonstrates debouncing of the vertical scroll.