Angular Data GridTree Data - Group Column

Customise the generated group column when using Tree Data.

Group Column Configuration Copy

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 and a minimum width to each Group Column cell using the following configuration:

<ag-grid-angular
    [autoGroupColumnDef]="autoGroupColumnDef"
    /* other grid options ... */ />

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

Group Cell Component Copy

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

Child Row Counts Copy

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 Copy

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

Custom Component Copy

Where the default agGroupCellRenderer does not meet your requirements, you can provide a Custom Cell 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-angular
    [autoGroupColumnDef]="autoGroupColumnDef"
    /* other grid options ... */ />

this.autoGroupColumnDef = {
    cellRenderer: CellRenderer,
};

Dynamic Component Selection Copy

When it's necessary to use different renderers in the same column, you can configure this with the cellRendererSelector property in the autoGroupColumnDef grid option.

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-angular
    [cellRendererSelector]="cellRendererSelector"
    /* other grid options ... */ />

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

Refer to the Cell Components documentation for information on how to create custom cell renderers.

Next Up Copy

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