Data Grid - Virtualization

The grid is high performing thanks to its rows and columns virtualization engine.

DOM virtualization is what makes it possible for the Data Grid to handle an unlimited* number of rows and columns. This is a built-in feature of the rendering engine and greatly improves rendering performance.

*unlimited: Browsers set a limit on the number of pixels a scroll container can host: 17.5 million pixels on Firefox, 33.5 million pixels on Chrome, Edge, and Safari. A reproduction.

Row virtualization

Row virtualization is the insertion and removal of rows as the Data Grid scrolls vertically.

The grid renders some additional rows above and below the visible rows. You can use rowBufferPx prop to hint to the Data Grid the area to render, but this value may not be respected in certain situations, for example during high-speed scrolling. Row virtualization is limited to 100 rows in the Data Grid component.

Column virtualization

Column virtualization is the insertion and removal of columns as the Data Grid scrolls horizontally.

Overscanning by at least one column lets the arrow key focus on the next (not yet visible) item.
Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.
Overscanning more lets the built-in search feature of the browser find more matching cells.
Overscanning too much can negatively impact performance.

By default, columns coming under 150 pixels region are rendered outside of the viewport. You can change this option with the columnBufferPx prop. As for rowBufferPx, the value may be ignored in some situations. The following demo renders 1,000 columns in total:

You can disable column virtualization by calling apiRef.current.unstable_setColumnVirtualization(false), or by setting the columnBufferPx to a high value.

Scrolling without render gaps

The virtualizer supports two layout modes that differ in how scrolling and row positioning work.

In the default uncontrolled mode, the browser drives scrolling natively and the grid uses CSS sticky positioning to keep headers and pinned rows in place. Rendered rows are positioned inside a filler element that stretches the scroll container to the correct total height. Because the browser and JavaScript run asynchronously, fast scrolling can outpace rendering and produce brief white areas in the viewport.

In controlled mode, the grid takes over the scrolling. All visible elements are positioned with CSS position: absolute and updated together in a single JavaScript pass whenever the scroll position changes. This removes the filler element and ensures that headers, pinned rows, and data rows always move as one unit—eliminating the white-area gaps that can appear under fast scrolling. However, this mode may have a perceivable performance cost on some devices and browsers, as the browser can't use native scrolling.

Use the virtualizerLayoutMode key inside experimentalFeatures to opt in to the controlled mode:

<DataGrid experimentalFeatures={{ virtualizerLayoutMode: 'controlled' }} />

The demo below lets you switch between modes and scroll quickly to see the difference. If you don't see the difference, consider setting CPU Throttling in Chrome Dev Tools to simulate a lower-end device.

Disable virtualization

The virtualization can be disabled completely using the disableVirtualization prop. You may want to turn it off to be able to test the Data Grid with a headless browser, like jsdom.

<DataGrid {...data} disableVirtualization />