Grouping Basics

The KendoReact Data Grid enables you to display grouped table data.

The Grid Package is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

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:

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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Expand and Collapse all groups

The following example demonstrates how to add button to expand or collapse all groups in the Grid.

Example
View Source
Edit In Stackblitz  
Change Theme: