---
title: "Row Grouping - Custom Group Columns"
enterprise: true
framework: vue
version: "36.1.0"
---

# Row Grouping - Custom Group Columns

Custom Group Columns can be provided to gain additional control over the group columns.

> **Warning**
>
> We advise against using your own group columns. Only do this if you require:
>
> - The ability to position a column left of the group column, and `colDef.lockPosition` or `colDef.pinned` are insufficient.
> - Fine grain control of [Multiple Group Columns](https://www.ag-grid.com/vue-data-grid/grouping-multiple-group-columns/) configuration per column, where callbacks are unsupported.

## Enabling a Single Custom Group Column

A [Single Group Column](https://www.ag-grid.com/vue-data-grid/grouping-single-group-column/) can be configured by setting the `groupDisplayType` grid option to `"custom"`. The column displaying groups then needs to also be included in the `columnDefs` with `colDef.showRowGroup` set to `true`, and the `cellRenderer` set to `'agGroupCellRenderer'`.

#### Custom Grouping Single Group Column

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :groupDisplayType="groupDisplayType"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      // one column for showing the groups
      {
        headerName: "Group",
        cellRenderer: "agGroupCellRenderer",
        showRowGroup: true,
        minWidth: 210,
      },
      // the first group column
      { field: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "athlete" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 200,
    });
    const groupDisplayType = ref<RowGroupingDisplayType>("custom");
    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,
      groupDisplayType,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Custom Grouping Single Group Column](https://www.ag-grid.com/examples/grouping-custom-group-columns/custom-grouping-single-group-column/vue3)

The example above demonstrates the following configuration:

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :groupDisplayType="groupDisplayType"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'country', rowGroup: true, hide: true },
    { field: 'year', rowGroup: true, hide: true },
    { headerName: 'Groups', showRowGroup: true, cellRenderer: 'agGroupCellRenderer' },
    // ...other column definitions
];
this.groupDisplayType = 'custom';
```

## Enabling Multiple Custom Group Columns

[Multiple Group Columns](https://www.ag-grid.com/vue-data-grid/grouping-multiple-group-columns/) can be configured by setting the `groupDisplayType` grid option to `"custom"`.

Each column displaying groups needs to be included in the `columnDefs` with `colDef.showRowGroup` set to the `colId` of the grouped column they are displaying. The `colDef` also requires `cellRenderer` to be set to `'agGroupCellRenderer'`.

#### Custom Grouping Multiple Group Columns

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :groupDisplayType="groupDisplayType"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Country Groups",
        minWidth: 200,
        showRowGroup: "country",
        cellRenderer: "agGroupCellRenderer",
      },
      {
        headerName: "Year Groups",
        minWidth: 200,
        showRowGroup: "year",
        cellRenderer: "agGroupCellRenderer",
      },
      { field: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "athlete", minWidth: 220 },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const groupDisplayType = ref<RowGroupingDisplayType>("custom");
    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,
      groupDisplayType,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Custom Grouping Multiple Group Columns](https://www.ag-grid.com/examples/grouping-custom-group-columns/custom-grouping-many-group-columns/vue3)

The example above demonstrates the following configuration for configuring multiple groups columns:

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :groupDisplayType="groupDisplayType"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { colId: 'country', field: 'country', rowGroup: true, hide: true },
    { colId: 'year',  field: 'year', rowGroup: true, hide: true },
    { headerName: 'Country Groups', showRowGroup: 'country', cellRenderer: 'agGroupCellRenderer', },
    { headerName: 'Year Groups', showRowGroup: 'year', cellRenderer: 'agGroupCellRenderer', },
    // ...other column definitions
];
this.groupDisplayType = 'custom';
```