React Data GridRow Grouping - Group Rows

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

Enabling Group Rows Copy Link

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 Copy Link

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 Copy Link

Checkbox Selection Copy Link

The agGroupCellRenderer can be configured to show checkboxes for row selection. Setting the Row Selection checkboxLocation property to 'autoGroupColumn' does not hide the Checkbox Column but does prevent any columns configured with agGroupCellRenderer from showing checkboxes.

The example above demonstrates the following configuration:

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

<AgGridReact rowSelection={rowSelection} />

Custom Inner Renderer Copy Link

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 Copy Link

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 Copy Link

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