Top
DataGrid - Performance and virtualization
DataGrid
The <DataGrid /> is designed from the ground-up to be very fast and efficient with big datasets. If you can fit a dataset into the browser without making it freeze, then handling it through the <DataGrid /> will be by no means worse.
Besides being able to render huge amounts of data (and therefore very many rows), the grid is also built to support a big number of columns. Although in most cases 10 columns or less are enough, the <DataGrid /> can handle about 50 columns quite easily.
In order to make the component zippy while handling and displaying so much data, virtualization has been used extensively. Virtualization is used for both the rows and for the columns (in case there are many columns).
Virtualizing the rows is possible because of the fixed row height (configured via rowHeight - defaults to 40). Column virtualization is performed when the number of columns is greater or equal to virtualizeColumnsThreshold (defaults to 15) or when virtualizeColumns=true.
<DataGrid /> peformance mostly refers to how the <DataGrid /> behaves & updates while scrolling - since this is the most performance-sensitive operation one can do with a <DataGrid />.
In case you run into a performance issue, the first thing you need to check is whether you're updating <DataGrid /> props unnecessarily.
To boost performance of the <DataGrid />, we treat props as immutable and only update the <DataGrid /> when you pass different props.
So for example, to improve the rendering performance, make sure you pass the same reference to a dataSource when rendering the <DataGrid />, instead of building the dataSource in the render function of your app and passing it new each time to the<DataGrid />, even when the dataSource doesn't change.
If the performance issue still persists, you might try to increase the default rowHeight. The less rows fit into the viewpot, the snappier the <DataGrid /> is.
In case you have many columns, and the <DataGrid /> performs column virtualization, try increasing the widths of <DataGrid /> columns in order to improve performance. The less columns fit into the viewport, the snappier the <DataGrid /> is.
The <DataGrid /> is built with row virtualization in mind. If however you need rows that have their natural height (different rows with different heights), you need to configure the <DataGrid /> with rowHeight=null. In this case, you also need to help the <DataGrid /> by specifying a minimum height for the rows, via minRowHeight - this will help the <DataGrid /> in virtualizing the rows by specifying that all rows will at least have the specified minimum height.
When using rowHeight=null you might run into some edge cases or props that are not well supported - it definitely won't perform as well as configurations with fixed rowHeight. So be warned that <DataGrid /> components with rowHeight=null might be quite rough around the edges (except if you're disabling virtualization - see the note below).
In case you have small datasets and want to avoid virtualization, you can configure the grid with virtualized=false.
When turning off virtualization via virtualized=false it's safe to use rowHeight=null to render <DataGrid /> components with flexible/natural row heights.