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:
Note that the plugin order is important.
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
The following example demonstrates the basic Grid with virtual scrolling:
The Grid also supports column virtualization, which is demonstrated in the following demo:
If the Grid should have the same size as the container element, set the
height property to “auto” and the Grid root element’s style setting to
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.
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.
DataTypeProviderand custom components
If you use a custom
cellComponent, its height and the
estimatedRowHeight value should be equal. The same applies to a custom formatter defined in the DataTypeProvider plugin.