@progress/kendo-grid-react-wrapper/docs/data-operations/grouping.md

Kendo UI Grid wrapper for React

---
title: Grouping
page_title: React Grid Wrapper Data Operations - Grouping - Kendo UI
description: "Get started with the Grid wrapper for React by Kendo UI and learn how to enable grouping to be able to display grouped table data."
slug: grouping_grid
position: 1
---

# Grouping

By default, grouping is disabled and the `groupable` option is set to `false`.

To enable grouping for the Kendo UI wrapper for React, set `groupable` to `true`. As a result, the header renders a new area which allows the user to drop a column on it and group the data by that column. You can also group the data by multiple columns through dragging a second column onto the grouping header.

```sh
<Grid groupable={true} // Other configuration.
/>
```

For more information on grouping, refer to the documentation of the [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/walkthrough#configuration-Grouping).

{% meta height:660 %}
```jsx-preview
class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url:"https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}
                scrollable={true} height={600}
                groupable={true}>
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" />
                <GridColumn field="UnitsInStock" title="Units in Stock" width="120px" />
                <GridColumn field="Discontinued" width="120px" />
            </Grid>
        );
    }
}

ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Suggested Links

* [Grouping of the Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/walkthrough#configuration-Grouping)
* [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
* [API Reference of the Grid Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)