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.
3. Manually group the data. The Grid expects the grouped data to be a collection of GroupResults.

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

Example

View Source

Edit In Stackblitz  

Change Theme:Material theme

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));
}

Suggested Links

• GroupDescriptor
• dataStateChange
• API Reference of the Grid