---
product: "AG Grid"
title: "Row Grouping"
description: "Enable row grouping in the React Data Grid to allow rows to be grouped by columns. Define row groups, use the Grid API, or use the UI to group rows."
enterprise: true
framework: react
version: "36.2.0"
related:
    - title: "Grouping Data"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-data/"
    - title: "Group Display Types"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-display-types/"
    - title: "Row Group Panel"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-group-panel/"
    - title: "Expanding Groups"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-opening-groups/"
    - title: "Hierarchy Selection"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-row-selection/"
    - title: "Sorting"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-sorting/"
    - title: "Editing Groups"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-edit/"
    - title: "Row Dragging"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/grouping-row-dragging/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Row Grouping

The Grid can group rows with equivalent cell values under shared parent rows.

#### Kitchen Sink

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule, RowGroupingPanelModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  RowGroupingModule,
  RowGroupingPanelModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "country", rowGroup: true, enableRowGroup: true, hide: true },
    { field: "year", rowGroup: true, enableRowGroup: true, hide: true },
    { field: "athlete" },
    { field: "sport", enableRowGroup: true },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return {
      minWidth: 200,
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            rowGroupPanelShow={"always"}
            groupDefaultExpanded={1}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Kitchen Sink](https://www.ag-grid.com/archive/36.2.0/examples/grouping/kitchen-sink/reactFunctionalTs/)

## Enabling Row Grouping

Row Grouping is enabled by setting `rowGroup` to `true` on one or more [Column Definition](https://www.ag-grid.com/archive/36.2.0/react-data-grid/column-definitions/). Group rows are then introduced for each unique value in that column, containing the rows with that value.

The example above uses the following configuration to group rows by their `country` and `year` values:

```jsx
const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true },
    { field: 'year', rowGroup: true },
    // ...other column definitions
]);

<AgGridReact columnDefs={columnDefs} />
```

## API Reference

> **Note**
>
> The row grouping state can be saved and restored as part of [Grid State](https://www.ag-grid.com/archive/36.2.0/react-data-grid/grid-state/).

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `groupDisplayType` | `RowGroupingDisplayType` |  |  |  |
| `autoGroupColumnDef` | `AutoGroupColumnDef` |  |  |  |
| `groupRowRenderer` | `any` |  |  |  |
| `groupRowRendererParams` | `any` |  |  |  |
| `showOpenedGroup` | `boolean` |  |  |  |
| `groupHideOpenParents` | `boolean` |  |  |  |
| `groupHideColumnsUntilExpanded` | `boolean` |  |  |  |
| `groupHideParentOfSingleChild` | `boolean \| 'leafGroupsOnly'` |  |  |  |
| `initialGroupOrderComparator` | `InitialGroupOrderComparator` |  |  |  |
| `groupAllowUnbalanced` | `boolean` |  |  |  |
| `groupMaintainOrder` | `boolean` |  |  |  |
| `groupDefaultExpanded` | `number` |  |  |  |
| `isGroupOpenByDefault` | `IsGroupOpenByDefault` |  |  |  |
| `suppressGroupRowsSticky` | `boolean` |  |  |  |
| `stickyRowsMaxViewportRatio` | `number` |  |  |  |
| `rowGroupPanelShow` | `'always' \| 'onlyWhenGrouping' \| 'never'` |  |  |  |
| `rowGroupPanelSuppressSort` | `boolean` |  |  |  |
| `pivotPanelSuppressSort` | `boolean` |  |  |  |
| `groupLockGroupColumns` | `number` |  |  |  |
| `groupHierarchyConfig` | `GroupHierarchyConfig` |  |  |  |
| `suppressDragLeaveHidesColumns` | `boolean` |  |  |  |
| `suppressGroupChangesColumnVisibility` | `boolean \| 'suppressHideOnGroup' \| 'suppressShowOnUngroup'` |  |  |  |
| `ssrmExpandAllAffectsAllRows` | `boolean` |  |  |  |
| `refreshAfterGroupEdit` | `boolean` |  |  |  |