Grouping Basics

The KendoReact Data Grid enables you to display grouped table data.

Getting Started

To enable grouping:

1. Set the groupable and group options of the Grid.
2. Handle the onGroupChange or the emitted onDataStateChange event. The onDataStateChange event is recommended when the Grid will have other data operations as it provides the complete dataState in a single event.
3. Group the data on the client by using our built-in methods groupBy or process. The data can also be grouped on the server by making a request using the event parameters. The Grid expects the grouped data to be a collection of GroupResults.

The groupBy method is recommended when using the onGroupChange event and the process method is recommended when using the onDataStateChange event.

For more information, refer to the article on the process helpers for bulk data operations.

Grouping Columns Dynamically

By default, all columns of the Grid can be grouped multiple times. To enable the grouping of specific Grid columns and implement dynamic grouping to a column, use a function or a variable for the groupable property.

Copy Code<Column field="ProductID" filterable={false} title="ID" width="50px" groupable={this.isGroupable("ProductID")} />

Copy CodeisGroupable = (field) => {
    return !((this.state.dataState.group || []).find((g) => g.field === field));
}

Persist Groups Collapsed State

The data-tools package provides few utility methods which can be used to generate unique group items ids and use them to persist the group collapsed state.

Expand and Collapse all groups

The following example demonstrates how to add button to expand or collapse all groups in the Grid.

Suggested Links

• GroupDescriptor
• dataStateChange
• API Reference of the Grid
• React Data Grid High-Level Overview