Vue Data GridRow Grouping - Group Rows

Full width group rows can be used to represent the group structure in the grid.

Enabling Group Rows

The example above demonstrates that both country and year are grouped. No group column is generated, instead using full width rows to display the group value cells.

Group Rows can be enabled by setting the groupDisplayType grid option to "groupRows" as shown below:

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

this.groupDisplayType = 'groupRows';

Cell Component

The group rows use the agGroupCellRenderer component to display the group information, as well as the chevron control for expanding and collapsing rows.

This can be configured with several Group Renderer Properties using the groupRowRendererParams grid option. The example below removes the row count. Checkboxes are enabled for row selection with the checkboxLocation property.

The example above demonstrates the following configuration:

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

this.columnDefs = [
    { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
    // ... other column definitions
];
this.groupRowRendererParams = {
    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 groupRowRendererParams grid option.

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 groupRowRenderer grid option.

The example above sets a custom cell renderer using the following configuration:

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

this.groupRowRenderer = CustomGroupCellRenderer;

Next Up

Continue to the next section to learn about the Row Group Panel.