DevExtreme React Grid - Virtual Scrolling with Remote Data: Lazy Loading (v19.1)

For a long time, our React Grid has supported Virtual Scrolling functionality. This feature enables the grid to render data efficiently when the source dataset is very large. Before v19.1, the entire dataset was expected to be available at once to support Virtual Scrolling.

It is now possible to combine Virtual Scrolling with remote data loading. With this configuration, the VirtualTable plugin loads the required data selectively from the server, as and when the user scrolls. The new plugin VirtualTableState handles the loading process on the basis of a custom loading function supplied by the developer. We call this feature set Lazy Loading.

this.getRemoteRows = (skip, take) => {
  ... // construct data query
  fetch(query)
    .then(response => response.json())
    .then(({data}) => {
      this.setState({
        skip,
        rows: data,
        ...
      })
    });
};

...

<Grid ... rows={rows}>
  <VirtualTableState ... getRows={this.getRemoteRows} skip={skip} />
  ...

Caching

To make remote data loading more efficient and save server round-trips, it is possible to activate a cache for loaded rows. A default implementation is available, but it is also possible to use a custom cache. You can implement your own or take advantage of existing caching implementations (e.g. when using GraphQL sources, or Redux).

const cache = createRowCache(VIRTUAL_PAGE_SIZE);
...
this.getRemoteRows = (skip, take) => {
  const cached = cache.getRows(skip, take);
  if (cached.length) {
    ...
  }
  else {
    fetch(query) ...
  }
};

Status And Future Plans

There is documentation for the VirtualTableState plugin and the guide page for the Lazy Loading features includes several demos. Currently, Infinite Scrolling is supported in addition to the default scrolling mentioned above.

We are working on support for a few grid features that cannot currently be combined with Virtual Scrolling (Detail Row and Grouping), and we are considering a combined Virtual Scrolling and Paging “mode”. As always, your feedback is valuable! If you have any thoughts, please feel free to post a comment below or open a ticket in our GitHub repository for discussion.

Free DevExpress Products - Get Your Copy Today