React 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:

const groupDisplayType = 'multipleColumns';

<AgGridReact groupDisplayType={groupDisplayType} />

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.

const autoGroupColumnDef = useMemo(() => { 
	return {
        headerValueGetter: params => `${params.colDef.headerName} Group Column`,
        minWidth: 220,
        cellRendererParams: {
            suppressCount: true,
        }
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

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:

const showOpenedGroup = true;

<AgGridReact showOpenedGroup={showOpenedGroup} />

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:

const [columnDefs, setColumnDefs] = useState([
    { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
    // ... other column definitions
]);
const autoGroupColumnDef = useMemo(() => { 
	return {
        cellRendererParams: {
            suppressCount: true,
        }
    };
}, []);
const rowSelection = useMemo(() => { 
	return {
        mode: 'singleRow',
        checkboxLocation: 'autoGroupColumn',
    };
}, []);

<AgGridReact
    columnDefs={columnDefs}
    autoGroupColumnDef={autoGroupColumnDef}
    rowSelection={rowSelection}
/>

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:

const rowSelection = useMemo(() => { 
	return {
        mode: 'multiRow',
        selectAll: 'all',
        checkboxLocation: 'autoGroupColumn',
    };
}, []);

<AgGridReact rowSelection={rowSelection} />

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:

const autoGroupColumnDef = useMemo(() => { 
	return {
        cellRendererParams: {
            innerRenderer: CustomMedalCellRenderer,
        },
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

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:

const autoGroupColumnDef = useMemo(() => { 
	return {
        filter: 'agGroupColumnFilter',
        floatingFilter: true,
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

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:

const groupHideOpenParents = true;

<AgGridReact groupHideOpenParents={groupHideOpenParents} />

Next Up

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