Search

Vue Data GridRow Grouping - Custom Group Columns

Enterprise

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

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 configuration per column, where callbacks are unsupported.

Enabling a Single Custom Group Column

A 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'.

The example above demonstrates the following configuration:

<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 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'.

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

<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';

Next Up

Continue to the next section to learn about the Single Group Column.