---
product: "AG Grid"
title: "Row Grouping"
description: "Enable row grouping in the Angular 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: angular
version: "36.2.0"
related:
    - title: "Grouping Data"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-data/"
    - title: "Group Display Types"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-display-types/"
    - title: "Row Group Panel"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-group-panel/"
    - title: "Expanding Groups"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-opening-groups/"
    - title: "Hierarchy Selection"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-row-selection/"
    - title: "Sorting"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-sorting/"
    - title: "Editing Groups"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/grouping-edit/"
    - title: "Row Dragging"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-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

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule, RowGroupingPanelModule } from "ag-grid-enterprise";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  RowGroupingModule,
  RowGroupingPanelModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [rowGroupPanelShow]="rowGroupPanelShow"
    [groupDefaultExpanded]="groupDefaultExpanded"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: 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" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    minWidth: 200,
  };
  rowGroupPanelShow: "always" | "onlyWhenGrouping" | "never" = "always";
  groupDefaultExpanded = 1;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

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

## 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/angular-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:

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: 'country', rowGroup: true },
    { field: 'year', rowGroup: true },
    // ...other column definitions
];
```

## 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/angular-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` |  |  |  |