React Data GridRow Grouping - Single Column

Display the group structure with a single generated column in the grid.

Enabling a Single Group Column

The example above demonstrates that both country and year are grouped. Only a single group column is used to display the group value cells.

The Single Group Column is enabled by default, but it can be set explicitly by setting the groupDisplayType grid option to "singleColumn" as shown below:

const groupDisplayType = 'singleColumn';

<AgGridReact groupDisplayType={groupDisplayType} />

Configuration

The Single Group Column is 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 columns header name, apply a minimum width, and display athlete values in the leaf level rows. It also Configures the Group Cell Component using the cellRendererParams option to remove the count from each row group.

const autoGroupColumnDef = useMemo(() => { 
	return {
        headerName: 'My Group',
        field: 'athlete',
        minWidth: 220,
        cellRendererParams: {
            suppressCount: true,
        }
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

Cell Component

The group column uses 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 also Configures Row Selection to enable 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

The grid filters leaf rows by default, if all of a groups children are filtered out, the group is also hidden.

Inherit Row Grouped Columns Filters

The single group column content changes depending on the columns which have row grouping enabled. The agGroupColumnFilter can be used to display the filters for the columns with row grouping enabled.

The example above demonstrates the following configuration to enable the group column filter:

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

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

Tree Filter

The agSetColumnFilter can be used to filter the group column in a Tree List, representing the hierarchy of the row groups.

The example above demonstrates the following configuration to enable the tree set filter:

const autoGroupColumnDef = useMemo(() => { 
	return {
        filter: 'agSetColumnFilter',
        filterValueGetter: (params) => params.data.athlete,
        filterParams: {
            treeList: true,
            keyCreator: (params) => (params.value ? params.value.join('#') : null),
        },
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

Refer to the Tree List Filter documentation for further configuration options.

Text Filtering

Providing a filter value getter to the group column allows for a simple string search of any group level.

The example above demonstrates using a filter value getter which returns an array of ancestor row keys. This enables searching for any group value containing the filter text:

const autoGroupColumnDef = useMemo(() => { 
	return {
        filter: 'agTextColumnFilter',
        filterValueGetter: (params) => params.node.parent.getRoute(),
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

Next Up

Continue to the next section to learn about the Multiple Group Columns display type.