JavaScript Data GridRow Grouping - Custom Group Columns

This section covers how to take charge of displaying the row groups without using the built-in display types.

When using the Single Group Column, Multiple Group Columns and Group Rows display types, the grid automatically adds Auto Group Columns to display the groups.

However, it is also possible to take control over which columns display which groups. This is useful if you want to have a finer level of control over how your groups are displayed.

Enabling Custom Group Columns

To display row groups using custom group columns set groupDisplayType = 'custom' as shown below:

const gridOptions = {
    columnDefs: [
        // Single Group Column (Custom)
        { 
            // group column name
            headerName: 'Group',
            // use the group cell render provided by the grid
            cellRenderer: 'agGroupCellRenderer', 
            // informs the grid to display row groups under this column
            showRowGroup: true 
        },
        // columns to group by
        { field: 'country', rowGroup: true, hide: true },
        { field: 'year', rowGroup: true, hide: true },
        { field: 'athlete' },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' }
    ],

    // prevents the grid from automatically adding group columns 
    groupDisplayType: 'custom',

    // other grid options ...
}

Note in the snippet above that in order to make a column display a group, you need to configure the property coldef.showRowGroup for that column and can be configured in two different ways:

• To tell this column to show all the groups: coldef.showRowGroup= true
• To tell this column to show the grouping for a particular column: coldef.showRowGroup=colId, where colId is the column that you want to show the group by and set

If you do specify coldef.showRowGroup you are going to also tell this column how to display the contents of this group, the easiest way to do this is by using the out of the box Group Cell Component cellRenderer:'agGroupCellRenderer'

This illustrates how to configure a specific column to show the groups generated by the country column

const gridOptions = {
    columnDefs: [
        // The column we are grouping by, it is also hidden.
        { field: "country", rowGroup: true, hide: true },

        // We choose this column as the column to show the country groups.
        { headerName: "Country - group", showRowGroup: 'country', cellRenderer: 'agGroupCellRenderer' },
    ],

    // other grid options ...
}

Note that the group column needs an appropriate cell renderer, in this case the out-of-the-box group cell renderer is used.

The following example shows how to display all the groups in a single column

Custom Grouping Many Group Columns

The following example shows how to appoint individual columns to show individual groups

Custom Grouping Hidden Parents

The following example demonstrates hiding open parents using explicit group columns.

Adding Values To Leaf Nodes for Groups

Adding leaf nodes data can also be achieved even if you provide your own group columns, this is illustrated in the following example. Note the following:

• The first column shows the Country group only. The filterValueGetter is configured to return the country so that country is used for filtering.
• The second columns shows Year (for group levels) and Athlete (for leaf levels). Because the field is set, the filter will use the field value for filtering.
• This is an example of a case where not using auto group columns lets us add custom behaviour to each of the grouping columns.

Next Up

Continue to the next section to learn about the Group Cell Component.