React Data GridRow Grouping - Grouping Data

Enable grouping on a column to group rows by equivalent values.

Enabling Row Grouping

Row Grouping is enabled by setting rowGroup to true on one or more Column Definition. Parent rows are then introduced for each unique value in that column, containing the rows with that value.

The example above uses the following configuration to group rows by their country values:

const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true },
    // ...other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Grouping by Multiple Columns

When grouping on multiple columns using rowGroup, the order of columns within the column definitions is used to determine which column to group by first. This can be overridden with a custom order by providing the rowGroupIndex property in each grouped columns definition.

The example above demonstrates the following configuration for grouping rows by year first, and country second:

const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroupIndex: 1 },
    { field: 'year', rowGroupIndex: 0 },
    // ...other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Grouping on Object Data

When grouping on object data, the grid needs a way to compare items to determine if they are equivalent. Setting a keyCreator on the grouped column definition provides the grid with string keys it can compare.

The following example uses a custom set of rows, each containing an athlete field that maps to objects with id and name properties.

This demonstrates the following configuration for grouping rows by the athlete objects by their id property:

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'athlete',
        rowGroup: true,
        keyCreator: (params) => params.value.id,
        valueFormatter: (params) => params.value.name,
    },
    // ...other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Grouping on Null and Undefined Data

When grouping null, undefined or "" (empty string) values the grid will group these together under the heading (Blanks) as the final group.

By setting the groupAllowUnbalanced property to true, the grid will instead display these rows without a group.

To enable unbalanced grouping, the following configuration is used:

const groupAllowUnbalanced = true;

<AgGridReact groupAllowUnbalanced={groupAllowUnbalanced} />

Hiding Parents of Individual Rows

Groups with only a single child can be hidden from the grid by setting the groupHideParentOfSingleChild grid option to true. To remove only groups with a single leaf child, set this option to "leafGroupsOnly" instead.

Filtering does not impact which groups get removed. Only groups containing a single child prior to filtering being applied are removed.

The following is an example of the configuration used to hide all parents of a single row:

const groupHideParentOfSingleChild = true;

<AgGridReact groupHideParentOfSingleChild={groupHideParentOfSingleChild} />

Next Up

Continue to the next section to learn about the different Row Grouping Display Types.