React Data GridRow Grouping - Group Rows

Full width group rows can be used to represent the group structure in the grid.

Enabling Group Rows

The example above demonstrates that both country and year are grouped. No group column is generated, instead using full width rows to display the group value cells.

Group Rows can be enabled by setting the groupDisplayType grid option to "groupRows" as shown below:

const groupDisplayType = 'groupRows';

<AgGridReact groupDisplayType={groupDisplayType} />

Cell Component

The group rows use the agGroupCellRenderer component to display the group information, as well as the chevron control for expanding and collapsing rows.

This can be configured with several Group Renderer Properties using the groupRowRendererParams grid option. The example below removes the row count. Checkboxes are enabled for row selection with the checkboxLocation property.

The example above demonstrates the following configuration:

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

<AgGridReact
    columnDefs={columnDefs}
    groupRowRendererParams={groupRowRendererParams}
    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 groupRowRendererParams grid option.

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 groupRowRenderer grid option.

The example above sets a custom cell renderer using the following configuration:

const groupRowRenderer = CustomGroupCellRenderer;

<AgGridReact groupRowRenderer={groupRowRenderer} />

Next Up

Continue to the next section to learn about the Row Group Panel.