Virtual ScrollingPremium
Virtual scrolling is an alternative to paging for large data sets. It uses DOM virtualization to render only the visible rows, which keeps scrolling smooth and improves performance without displaying all records in the DOM at once.
Start Free Trial
As of KendoReact 11.0.0, the Grid's default scrollable mode is set to virtual for licensed users. To explicitly enable virtual scrolling, set the Grid scrollable option to virtual and specify the Grid height through the style prop. When you also provide values such as skip and pageSize, the Grid uses them to determine which records should be rendered in the current virtual range.
The following example demonstrates how to implement virtual scrolling in the Grid, where only the visible rows are rendered as the user scrolls through the data.
Configuration Options
After you enable virtual scrolling, configure the following props based on your data source and layout requirements.
skip— Sets how many records are skipped before the current virtual page. This is useful when you control the current virtual range through state.take— Defines how many records are rendered in the current view.total— Sets the full number of records so the scrollbar can represent the complete range.pageSize— Sets how many records are requested for each virtual page.rowHeight— Sets the height of each row. Use a fixed row height so the Grid can calculate the virtual layout correctly.detailRowHeight— Sets the height of each detail row when detail rows are enabled.showLoader— Displays the built-in loading overlay while remote data is being fetched.loader— Replaces the default loading overlay with a custom loader component.
Depending on your scenario, use the following sections:
| Section | Description |
|---|---|
| Virtualization with Local Data | Use this setup when all data is already available in memory and virtualization is mainly used to reduce DOM rendering work. |
| Virtualization with Remote Data | Bind the Grid to the currently loaded page, handle onPageChange, and show loading feedback while the next range is being fetched. |
| Using Virtualization with Grouping | Combine virtual scrolling with grouped data and process the grouped result locally or on the server. |
| Using Virtualization with Detail Rows | Keep detail rows compatible with virtualization by configuring the expand state and detail row height. |
| Using Virtualization with Responsive Columns | Preserve virtual scrolling while adapting cell templates to different column widths. |
| Debouncing PageChange Events | Reduce unnecessary remote requests when users scroll quickly through large result sets. |
Each section below includes configuration guidance and a live example for that virtualization scenario.
Virtualization with Local Data
Use this setup when the full data set is already available in memory and virtualization is needed mainly to reduce DOM rendering work. Bind the Grid data property to the local collection, then use the virtual paging settings such as skip, pageSize, and total together with the onPageChange handler to control which part of the collection is currently visible. In this mode, scrolling updates the visible slice of the already loaded data, so the Grid can stay responsive without requesting additional records.
The following example demonstrates basic virtual scrolling with locally loaded data, where only the visible rows are rendered as the user scrolls.
This setup works best when the full data set is already available in memory and the main bottleneck is DOM rendering rather than data retrieval.
Virtualization with Remote Data
When the data comes from a remote service, bind the Grid data property to the currently loaded page and keep the virtual paging state in your application. Then implement the onPageChange handler so it requests the records needed for the next visible range as the user scrolls. This allows the Grid to fetch and display only the required data while preserving the continuous virtual scrolling experience.
The following example demonstrates virtual scrolling with remotely loaded data and skeleton cells as loading placeholders.
While the request is in progress, the Grid can render skeleton cells for rows whose data has not yet arrived. Alternatively, set showLoader={true} to show a loading overlay, use the loader prop to supply a custom component, or omit it to use the built-in one. For more details, see the Loading Indicator article.
<Grid showLoader={true} loader={<div>Loading...</div>} />If the remote endpoint is slower or users scroll aggressively, see Debouncing PageChange Events to limit unnecessary requests.
Using Virtualization with Grouping
You can use virtual scrolling in combination with grouped data.
- Set the
groupableandgroupoptions of the Grid. - Set the
scrollableoption tovirtual. - Handle the emitted
onDataStateChangeevent. TheonDataStateChangeevent fires upon user interaction with the scrolling or changing the groups, and then processes the data and returns the data to the Grid.
To programmatically implement the processing of the data, either:
- Send a request to the server to execute the grouping on the server side, or
- Use the
processmethod of theDataQuerylibrary which automatically processes the data.
The Grid expects the grouped data to be a collection of GroupResults.
The following example demonstrates virtual scrolling combined with data grouping, where the visible grouped rows are rendered on demand as the user scrolls.
Using Virtualization with Detail Rows
You can also use DOM virtualization in combination with detail rows.
- Set the
detailto the detail component. - Set the
detailExpandprop to handle the expand state of the Grid internally. - Handle
onDetailExpandChangeand setdetailRowHeightso the virtual layout can account for the expanded content.
The following example demonstrates virtual scrolling with expandable detail rows, where the detail content is revealed inline without breaking the scroll position.
Using Virtualization with Responsive Columns
The virtual scrolling functionality requires that all Grid rows have an equal, predefined height. However, you can still keep virtual scrolling and use responsive columns which have different cell templates based on the column width.
The following example demonstrates virtual scrolling with responsive column templates that adapt their content based on the column width.
Debouncing PageChange Events
When configured for virtualization, the Grid fires the onPageChange event as often as possible. This behavior allows for a smoother scrolling experience when the data is available in memory.
If the data is requested from a remote service, debounce or otherwise limit the page changes so rapid scrolling does not trigger unnecessary requests. This is especially useful when the backend is slower or when you want to reduce traffic while users scroll through large result sets.
The following example demonstrates remote virtual scrolling with a debounced onPageChange handler.