Vue Data GridRow Grouping - Multiple Group Columns

Display the group structure with one group column representing each level of row grouping.

Enabling Multiple Group Columns

The example above demonstrates that both country and year are grouped. One group column is used to display the group value cells for each column that was grouped.

Multiple Group Columns can be enabled by setting the groupDisplayType grid option to "multipleColumns" as shown below:

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

this.groupDisplayType = 'multipleColumns';

Configuration

The columns are added to the grid when row grouping is present, and can be configured via the autoGroupColumnDef grid option to define Column Options.

The example above uses the configuration demonstrated below to change the column's header name and apply a minimum width. It also Configures the Group Cell Component using the cellRendererParams option to remove the count from each row group.

<ag-grid-vue
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

this.autoGroupColumnDef = {
    headerValueGetter: params => `${params.colDef.headerName} Group Column`,
    minWidth: 220,
    cellRendererParams: {
        suppressCount: true,
    }
};

Display the Parent Group Value

The group hierarchy is represented by relative location to the parent. When scrolling through the grid it can become harder to keep track of the parent group value.

Setting the grid property showOpenedGroup to true will show the value of the parent group inside the group column.

The example above demonstrates the following configuration to show the parent group value inside the group column:

<ag-grid-vue
    :showOpenedGroup="showOpenedGroup"
    /* other grid options ... */>
</ag-grid-vue>

this.showOpenedGroup = true;

Cell Component

The group columns use the agGroupCellRenderer component to display the group information, as well as the chevron control for expanding and collapsing rows. The renderer also embeds the grouped columns renderer and displays this inside of the group cell.

This can be configured with several Group Renderer Properties using the autoGroupColumnDef property cellRendererParams. The example below removes the row count and enables checkboxes for row selection.

The example above demonstrates the following configuration:

<ag-grid-vue
    :columnDefs="columnDefs"
    :autoGroupColumnDef="autoGroupColumnDef"
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
    // ... other column definitions
];
this.autoGroupColumnDef = {
    cellRendererParams: {
        suppressCount: true,
    }
};
this.rowSelection = {
    mode: 'singleRow',
    checkboxLocation: 'autoGroupColumn',
};

Configurable Options

Checkbox Selection

The agGroupCellRenderer can be configured to show checkboxes for row selection. Setting the Row Selection checkboxLocation property to 'autoGroupColumn' hides the Checkbox Column instead using the group cell renderer to display checkboxes.

The example above demonstrates the following configuration:

<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = {
    mode: 'multiRow',
    selectAll: 'all',
    checkboxLocation: 'autoGroupColumn',
};

Custom Inner Renderer

When using the group cell renderer, the agGroupCellRenderer component will inherit the grouped columns renderer and display this inside of the group cell, adjacent to any configured checkboxes, cell count, and the expand/collapse chevron control.

This inner renderer can be overridden with a Custom Cell Component by setting the innerRenderer and innerRendererParams properties on the cellRendererParams configuration.

The example above uses the following configuration to provide a custom inner renderer to the group column:

<ag-grid-vue
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

this.autoGroupColumnDef = {
    cellRendererParams: {
        innerRenderer: CustomMedalCellRenderer,
    },
};

Custom Cell Renderer

The Group Cell Renderer can be entirely replaced with a Custom Cell Component by setting the cellRenderer property on the autoGroupColumnDef configuration.

Filtering

To enable filters on the group column, set the filter property of the autoGroupColumnDef to 'agGroupColumnFilter'. This configuration will cause the group column to inherit the the filter from the column it is representing.

The example above demonstrates the following configuration to inherit the filter from the grouped column:

<ag-grid-vue
    :autoGroupColumnDef="autoGroupColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

this.autoGroupColumnDef = {
    filter: 'agGroupColumnFilter',
    floatingFilter: true,
};

Hiding Expanded Parent Rows

Expanded rows can be configured to disappear when they are open, instead moving the group cell renderer into the first child row. To enable this feature set the groupHideOpenParents grid option to true.

The example above demonstrates the following configuration to hide open parents:

<ag-grid-vue
    :groupHideOpenParents="groupHideOpenParents"
    /* other grid options ... */>
</ag-grid-vue>

this.groupHideOpenParents = true;

Next Up

Continue to the next section to learn about the Group Rows display type.