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:

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

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

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

Fill the Container

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%.

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React

Scroll to Row

To scroll the table to a particular row, call the scrollToRow method and pass the row ID as its parameter. To call the method, you need the VirtualTable plugin's ref.

In the following demo, the scrollToRow method is used to scroll the table to a new or saved row. When you add a new row, it is added to the top of the table, and the table is scrolled to it. When you save the row, its position is changed according to sorting, and the table is scrolled to that position.

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

NOTE: Scrolling to a row cannot be used with lazy loading. This is because the Grid loads rows in parts in lazy loading mode, and scrolling to a row requires all the row IDs.

Note on the use of VirtualTable with DataTypeProvider and custom components

If you use a custom rowComponent or cellComponent, its height and the estimatedRowHeight value should be equal. The same applies to a custom formatter defined in the DataTypeProvider plugin.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies. For more information, refer to DevExpress’ privacy policy and cookie policy.