React Data GridRow Grouping - Grouping Data

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

Enabling Row Grouping Copy Link

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

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

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 by Dates and Times Copy Link

When grouping by date/time values, the grid can optionally group by components of the date/time.

To enable grouping by parts of the date for a particular column, use the rowGroupingHierarchy property of the Column Definition.

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

<AgGridReact columnDefs={columnDefs} />

This snippet is illustrated in the example below.

Defining Custom Grouping Hierarchies Copy Link

When using rowGroupingHierarchy as demonstrated in Grouping by Dates and Times, the grid provides built-in support for several components of a date/time value.

Users may instead provide definitions of their own components via the groupHierarchyConfig grid option. These definitions may then be used in the rowGroupingHierarchy property of a column definition.

The following example illustrates this by defining a custom grouping hierarchy component that allows grouping by the week number:

Grouping on Null and Undefined Data Copy Link

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

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

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