Lazy loading enables the React Grid component to load row data in parts—once rows enter the viewport.
The following plugins implement lazy loading:
Note that the plugin order is important.
This feature functions only in controlled mode.
Grid rows are loaded in pages. The Grid maintains only three pages at a time: the visible page and two neighboring pages. The number of rows on each page is specified by the
pageSize property. The smaller the
pageSize is, the more frequently the Grid requests rows. The total number of rows in the data set is specified in the
Lazy loading is initiated by the
getRows function that accepts the
take parameters. They specify how many rows to skip from the start of the data set and how many rows to load.
loading property should indicate whether there is an active request. Once the request is completed, pass the loaded rows to the
rows property. In addition, pass the
skip value to the
skip property, so that the Grid can understand where to begin rendering rows.
Row caching helps reduce the number of data requests. Call the
createRowCache function to instantiate the cache. You can use alternative cache implementations, such as the Apollo GraphQL cache or a custom implementation.
If users are allowed to sort or filter rows, clear the row cache each time the sort or filter settings are changed. Filtering also requires the total number of rows to be returned in every response.
NOTE: Debounce requests on filter change to avoid fetching data on each keystroke.
In the following demo, the Grid allows you to sort and filter rows. Loaded rows are cached.
In infinite scrolling mode, rows are loaded in sequence. To enable this mode, set the
infiniteScrolling property to