# Grid Grouping Display Modes

The Grid supports four display modes for grouped data: [**Default**](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping-modes#default-mode), [**Compact**](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping-modes#compact-mode), [**Single Column**](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping-modes#single-column-mode), and [**Multiple Columns**](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping-modes#multiple-columns-mode).

Set the [`displayMode`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#displaymode) property of the [`groupable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#groupable) setting to configure the grouping display mode.

Each mode changes how grouped rows and group columns are generated. Choose the mode that matches the number of group levels, available horizontal space, and data presentation.

The following table summarizes the recommended use cases for each display mode.

| Display Mode          | Recommended for                                    | Description                                                   |
| :-------------------- | :------------------------------------------------- | :------------------------------------------------------------ |
| **`default`**         | Traditional hierarchical lists (1–2 group levels)  | Adds an indent column for each group level.                   |
| **`compact`**         | Mobile web apps & constrained viewport layouts     | Removes indent columns and uses full-width group header rows. |
| **`singleColumn`**    | High-density dashboards & deep nesting (3+ levels) | Displays all group levels in a single grouping column.        |
| **`multipleColumns`** | Multi-variable analytics & side-by-side comparison | Displays one grouping column for each active group level.     |

## Default Mode

The default mode adds an indent column for each nested group level before the data columns. As groups become deeper, data rows receive progressively more indentation. This mode is active when [`displayMode`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#displaymode) is not specified.

**Best for**

* Traditional hierarchical lists with 1–2 group levels
* Classic tree-style data structures
* Scenarios where indent-based nesting is visually clear

The following demo shows the Grid with the default display mode applied.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/display-modes/default/source.txt)

## Compact Mode

The compact mode removes indent columns and renders group header rows across the Grid width. Group header content identifies the hierarchy without reducing the width available to data columns. This mode is active when [`displayMode`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#displaymode) is set to `'compact'`.

**Best for**

* Mobile web apps
* Constrained viewport layouts
* Maximizing the available space for data columns

The following demo shows the Grid with the compact display mode applied.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/display-modes/compact/source.txt)

## Single Column Mode

The single column mode displays all group levels in one grouping column before the data columns. The Grid indicates nesting depth with increasing left padding. Long group titles are truncated with an ellipsis when necessary. This mode is active when [`displayMode`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#displaymode) is set to `'singleColumn'`.

To configure the width, title or other settings of the generated group column, refer to the [Configuring Group Columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping-modes#configuring-group-columns) section.

**Best for**

* High-density dashboards
* Deep nesting with 3+ group levels
* Reducing the number of grouping columns

The following demo shows the Grid with the single column display mode applied.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/display-modes/single-column/source.txt)

## Multiple Columns Mode

The multiple columns mode displays one grouping column for each active group level. Each column represents one level in the hierarchy, which makes grouped values easier to compare. Long group titles are truncated with an ellipsis when necessary. This mode is active when [`displayMode`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#displaymode) is set to `'multipleColumns'`.

To configure the width, title or other settings of the generated group columns, refer to the [Configuring Group Columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping-modes#configuring-group-columns) section.

**Best for**

* Multi-variable analytics
* Side-by-side comparison of grouped values
* Wide layouts with sufficient horizontal space

The following demo shows the Grid with the multiple columns display mode applied.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/display-modes/multiple-columns/source.txt)

## Hiding Grouped Columns

By default, the Grid displays grouped values in both the generated group columns and the original data columns. If you don't want this duplicated information, set the [`hideGroupedColumns`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#hidegroupedcolumns) property of the [`groupable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#groupable) setting to `true`.

The following demo shows the Grid with the `hideGroupedColumns` option enabled. The grouped values are displayed only in the generated group columns, while the original data columns are hidden.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/hide-grouped-columns/source.txt)

## Configuring Group Columns

When the Grid uses the `singleColumn` or `multipleColumns` display modes, it generates one or more group columns that display the grouped values. You can customize these generated columns through the [`groupColumn`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#groupcolumn) property of the [`groupable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#groupable) setting.

The [`groupColumn`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#groupcolumn) property supports two configuration approaches. You can either apply the same settings to all generated group columns or configure each one individually.

### Apply Settings to All Group Columns

To apply the same settings to all generated group columns, assign a [`GridGroupColumnSettings`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupcolumnsettings) object to the [`groupColumn`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#groupcolumn) property.

```js
<Grid
    groupable={{
        displayMode: 'multipleColumns',
        groupColumn: { width: 200, title: 'Group', reorderable: false }
    }}
    ...
/>
```

The following demo shows the Grid with the same width, title, and reorderable settings applied to all generated group columns.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/group-column-settings/source.txt)

### Configure Each Group Column Individually

To configure each generated group column individually, assign a [`GridGroupColumnFn`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupcolumnfn) callback to the [`groupColumn`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupablesettings#groupcolumn) property. The callback receives the `GroupDescriptor` for the generated group column and returns a [`GridGroupColumnSettings`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridgroupcolumnsettings) object.

```js
const groupColumnCb = (group) => ({
    width: group.field === 'department' ? 260 : 160,
    // Any field other than department or officeLocation is labeled Device Type.
    title: group.field === 'department' ? 'Department' : group.field === 'officeLocation' ? 'Location' : 'Device Type',
    reorderable: false
});

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: groupColumnCb }} ... />
```

The following demo shows the Grid with individually configured group column titles and widths.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/grouping/group-column-per-level/source.txt)

## Suggested Links

* [Aggregates for Grouped Data](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/grouping)
* [Locked Group Header Rows](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/locked-group-headers)
* [Sticky Group Columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping/sticky-group-headers)