---
product: "AG Grid"
title: "Row Grouping"
description: "Enable row grouping in the Vue 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: vue
version: "36.2.0"
related:
    - title: "Grouping Data"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-data/"
    - title: "Group Display Types"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-display-types/"
    - title: "Row Group Panel"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-group-panel/"
    - title: "Expanding Groups"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-opening-groups/"
    - title: "Hierarchy Selection"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-row-selection/"
    - title: "Sorting"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-sorting/"
    - title: "Editing Groups"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/grouping-edit/"
    - title: "Row Dragging"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule, RowGroupingPanelModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  RowGroupingModule,
  RowGroupingPanelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :rowGroupPanelShow="rowGroupPanelShow"
      :groupDefaultExpanded="groupDefaultExpanded"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const groupDefaultExpanded = ref(1);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowGroupPanelShow,
      groupDefaultExpanded,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-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-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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/vue-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` |  |  |  |