Grouping Basics
Premium

The KendoReact Data Grid enables you to 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 paging in two modes:

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

Using the Built-in State Management for Filtering

To enable grouping using the built-in state management mechanism, follow these steps:

Enable the autoProcessData prop to allow the Grid to handle paging automatically.
Set the filterable prop of the Grid to render a filter row under the column headers.
Set the dataItemKey prop to a unique value field from the data bound to the Grid.
(Optional) Set the defaultGroup prop to set initial grouping for the Grid.

The following example demonstrates how to implement grouping using the built-in state management of the KendoReact Grid.

Change Theme

Theme

Loading ...

Using the Grouping in Controlled Mode

To enable grouping in the KendoReact Grid and use it in controlled mode, follow these steps:

Set the groupable and group options of the Grid.
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.
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.

Change Theme

Theme

Loading ...

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.

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 provides few utility methods which can be used to generate unique group items ids and use them to persist 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 ...