Grouping Basics
Premium

The KendoReact Data Grid lets you display grouped table data.

The Grouping feature of the Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

Enabling Grouping

The KendoReact Grid supports grouping in two modes:

Built-in State Management: The Grid manages its own grouping state internally.
Controlled Mode: You manage the grouping state externally by handling events and updating the state.

Using the Built-in State Management for Grouping

To use grouping with the built-in state management, follow these steps:

Enable the autoProcessData prop to let the Grid handle grouping automatically.
Set the groupable prop of the Grid to enable grouping features.
Set the dataItemKey prop to a unique value field from the data in the Grid.
(Optional) Set the defaultGroup prop to add initial grouping for the Grid.

The following example shows how to use grouping with the built-in state management of the KendoReact Grid.

Change Theme

Theme

Loading ...

Using the Grouping in Controlled Mode

To use grouping in the KendoReact Grid with controlled mode, follow these steps:

Set the groupable and group options of the Grid.
Handle the onGroupChange or the onDataStateChange event. The onDataStateChange event works best when the Grid has other data operations because it provides the complete dataState in a single event.
Group the data on the client by using the groupBy or process methods. You can also group data on the server by making a request using the event parameters. The Grid needs the grouped data as a collection of GroupResults.

Use the groupBy method with the onGroupChange event, and the process method with the onDataStateChange event.

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

Change Theme

Theme

Loading ...

Grouping Columns Dynamically

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

jsx

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

jsx

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 gives you utility methods to create unique group item IDs. You can use these IDs to save the group collapsed state.

Change Theme

Theme

Loading ...

Expand and Collapse All Groups

The example below shows how to add a button that expands or collapses all groups in the Grid.

Change Theme

Theme

Loading ...