React Grid - Virtual Scrolling

Virtual scrolling allows the Grid component to display thousands of records on a single page. You can use this feature as an alternative to paging.

Browser Support Notes:

  • The following browsers do not support virtual scrolling because they do not support position: sticky:
    • Android Browser before 5.0
    • WebView for Android before 5.0
    • Internet Explorer
  • Currently, there is an issue with virtual scrolling in Microsoft Edge:

The VirtualTable plugin implements the virtual scrolling mode, and it should be used instead of the Table as they implement the same interfaces.

Note that the plugin order is important.

Basic Setup

The virtual table contains only the rendered rows; others are replaced with two stub rows whose heights depend on the estimatedRowHeight property value and change dynamically as the user scrolls.

You can change the virtual table’s height using the height property.

The following example demonstrates the basic Grid with virtual scrolling:

The Grid also supports column virtualization, which is demonstrated in the following demo:

Stretching out to Parent Element Size

If the Grid should have the same size as the container element, set the VirtualTable plugin’s height property to “auto” and the Grid root element’s style setting to height: 100%.