Grid / Grouping / Basics
material theme

Grouping Basics

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

The Grid component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free 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.

import React from 'react';
import ReactDOM from 'react-dom';

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';

import products from './products.json';

class App extends React.PureComponent {
    state = this.createAppState({
        take: 10,
        group: [ { field: 'UnitsInStock' } ]
    });

    render() {
        return (
            <Grid
                style={{ height: '520px' }}
                resizable={true}
                reorderable={true}
                filterable={true}
                sortable={true}
                pageable={{ pageSizes: true }}
                groupable={true}

                data={this.state.result}
                onDataStateChange={this.dataStateChange}
                {...this.state.dataState}

                onExpandChange={this.expandChange}
                expandField="expanded"
            >
                <Column field="ProductID" filterable={false} title="ID" width="50px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="UnitPrice" title="Unit Price" filter="numeric" />
                <Column field="UnitsInStock" title="Units In Stock" filter="numeric" />
                <Column field="Category.CategoryName" title="Category Name" />
            </Grid>
        );
    }

    createAppState(dataState) {
        return {
            result: process(products, dataState),
            dataState: dataState
        };
    }

    dataStateChange = (event) => {
        this.setState(this.createAppState(event.data));
    }

    expandChange = (event) => {
        event.dataItem[event.target.props.expandField] = event.value;
        this.setState({
            result: Object.assign({}, this.state.result),
            dataState: this.state.dataState
        });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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

Is this article helpful?

Not finding the help you need?

Contact Support