JavaScript Data GridRow Grouping

Row Grouping allows rows to be grouped by columns with the grid performing a 'group by' operation on the rows supplied to the grid. This section introduces Row Grouping and provides links to subsections that cover the various ways Row Grouping can be configured and customised.

The grid can be configured to initially display rows in a grouped state or rows can be grouped programmatically through the grid API's. Users can also manually group rows through the UI as shown below:

Enabling Default Row Grouping

To group rows by a particular column, enable the rowGroup column property as shown below:

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true, hide: true },
        { field: 'year', rowGroup: true, hide: true },
        { field: 'sport' },
        { field: 'total' }
    ],

    // other grid options ...
}

In the snippet above, rows will be grouped by country and year as both column definitions have rowGroup=true declared.

Note that the Single Group Column display type is used by default.

The example below demonstrates the default row grouping behaviour. Note the following:

• There are two active row groups as the supplied country and year column definitions have rowGroup=true declared.

• A group column is added to the left-hand side of the grid as there are active row groups.

• The country and year columns are hidden as hide=true on their column definitions.

Row Grouping Customisations

The previous example demonstrated the Default Row Grouping behavior, however extensive Row Grouping customisations are also possible as summarised below:

• Display Types - compares the different ways row groups can be displayed in the grid.
  • Single Group Column - a single group column is automatically added by the grid for all row groups.
  • Multiple Group Columns - group columns are automatically added by the grid for each row group.
  • Group Rows - group rows are automatically added by the grid containing the row groups instead of group columns.
  • Custom Group Columns - customise how row groups are displayed without using the built-in display types.
• Row Group Panel - add a panel above the grid to allow users control which columns the rows are grouped by.
• Locking Group Columns - Lock Group Columns to prevent ungrouping and rearranging of group columns by user.
• Group Order - control how row groups are ordered.
• Sorting Groups - configure and customise how row groups are sorted.
• Filtering Groups - configure and customise how row groups are filtered.
• Group Totals - add group totals showing totals for each group level.
• Opening Groups - control how row groups are expanded and collapsed.
• Complex Objects - group rows using row data contains complex objects.
• Unbalanced Groups - group rows when there are null or undefined group values.

API Reference

Row Grouping can be configured using the following grid properties:

Next Up

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