Using Virtualization with Grouping

Updated on Aug 14, 2026

Use virtual scrolling with grouped data to render the visible portion of a large grouped data set.

1. Set the groupable and group props of the Grid.
2. Set the scrollable prop to virtual.
3. Handle the datastatechange event to update the data state when users scroll or change groups.

vue

<Grid :groupable="true" :scrollable="'virtual'" :row-height="50" />

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 process method from the Data Query library to process the data on the client.

The Grid expects grouped data as a collection of GroupResult items.

The following example demonstrates virtual scrolling with grouped data. It handles datastatechange, updates the data state, and processes the grouped result before passing it to the Grid.

Loading ...

Suggested Links

• Grouping Basics
• Grid API Reference