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. TheonDataStateChange
event is recommended when the Grid will have other data operations as it provides the completedataState
in a single event. - Group the data on the client by using our built-in methods
groupBy
orprocess
. 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 ofGroupResults
.
The
groupBy
method is recommended when using theonGroupChange
event, and theprocess
method is recommended when using theonDataStateChange
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.
<Column field="ProductID" filterable={false} title="ID" width="50px" groupable={isGroupable("ProductID")} />
const [group, setGroup] = React.useState<GroupDescriptor[]>(initialGroup);
const isGroupable = (field) => {
return !((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 example below shows how to add a button that expands or collapses all groups in the Grid.