Vue Data GridTree Data - Group Column

Enterprise

Customise the generated group column when using Tree Data.

Group Column Configuration

When using Tree Data, the grid will automatically generate a group column to display the hierarchy. This column can be configured by using the autoGroupColumnDef grid option, allowing any Column Property to be overridden.

The example above sets different header text, a minimum width, and adds checkboxes to each Group Column cell the following configuration:

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

this.autoGroupColumnDef = {
    headerName: 'My Group',
    minWidth: 220,
    cellRendererParams: {
        checkbox: true,
    }
};

Displayed Values

The Group Column cells are populated by the path keys as a default. As these keys must be unique, it can be preferable to display a different value. This can be overridden by providing a field or valueGetter in the autoGroupColumnDef grid option.

The above example uses the following configuration to show two 'Bob Stevens' working within the same team, where the path is comprised of unique employee IDs:

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

this.treeData = true;
this.rowData = [
    { employeeId: '1', name: 'Alice Johnson', path: ['1'] },
    { employeeId: '2', name: 'Bob Stevens', path: ['1', '2'] },
    { employeeId: '3', name: 'Bob Stevens', path: ['1', '3'] },
    { employeeId: '4', name: 'Jessica Adams', path: ['1', '4'] },
];
this.getDataPath = data => data.path;
this.autoGroupColumnDef = {
    field: 'name', // display the name instead of the path key
};

Group Cell Component

The grid uses the agGroupCellRenderer component to render the group column cells.

Child Row Counts

When showing child counts with Tree Data, the child count is a count of all descendants, including groups.

Note how in the example above, the Desktop row has a child count of 5, of which one of is the ProjectAlpha Filler Group row.

Default Component Options

The options configurable on the agGroupCellRenderer via the column definition cellRendererParams are:

suppressPadding
boolean
Set to true to not include any padding (indentation) in the child rows.
suppressDoubleClickExpand
boolean
Set to true to suppress expand on double click.
suppressEnterExpand
boolean
Set to true to suppress expand on ↵ Enter
totalValueGetter
string | TotalValueGetterFunc
The value getter for the total row text. Can be a function or expression.
suppressCount
boolean
If true, count is not displayed beside the name.
checkbox
boolean | GroupCheckboxSelectionCallback
Set to true, or a function that returns true, if a checkbox should be included.
innerRenderer
any
The renderer to use for inside the cell (after grouping functions are added)
innerRendererParams
any
Additional params to customise to the innerRenderer.
innerRendererSelector
Function
Callback to enable different innerRenderers to be used based of value of params.

Custom Component

Where the default agGroupCellRenderer does not meet your requirements, you can provide a custom cell renderer component, via the cellRenderer property in the autoGroupColumnDef grid option.

The below example provides a custom cell renderer which:

  • Uses a custom icon to represent the groups expanded state
  • Responds to row expansion events to update if the group is expanded or collapsed from another source
  • Cleans up all event listeners when it's destroyed

This demonstrates supplying a custom cell renderer via the cellRenderer property in the autoGroupColumnDef:

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

this.autoGroupColumnDef = {
    cellRenderer: CellRenderer,
};

Dynamic Component Selection

Where it may be more appropriate to have two different renderers in the same column, you can instead use the cellRendererSelector property in the autoGroupColumnDef grid option.

cellRendererSelector
CellRendererSelectorFunc
Callback to select which cell renderer to be used for a given row within the same column.

The example below extends the Custom Component example to use a different renderer based on the rows level:

This uses the following configuration to display the default cell renderer for root level groups, and the custom renderer for all others:

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

this.cellRendererSelector = (params) => {
    if (params.node.level === 0) {
        return {
            component: 'agGroupCellRenderer',
        };
    }
    return {
        component: CustomGroupCellRenderer,
    };
};

Next Up

Continue to the next section to learn how to Expand Row Groups.