Grouping Basics
The KendoReact Data Grid enables you to display grouped table data.
Getting Started
To enable grouping:
- Set the
groupable
andgroup
options of the Grid. - Handle the
onGroupChange
or the emittedonDataStateChange
event. - 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.
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.
<Column field="ProductID" filterable={false} title="ID" width="50px" groupable={this.isGroupable("ProductID")} />
isGroupable = (field) => {
return !((this.state.dataState.group || []).find((g) => g.field === field));
}