React Data Grid

Row Grouping - Sorting Groups

react logo
Enterprise

This section provides details on how to configure and customise how row groups are sorted.

Group Sorting

When using Single Group Column or Multiple Group Columns sorting is enabled by default. If you wish to disable sorting this can be achieved by setting sortable = false. In cases where it is preferable to suppress sorting on the Row Group Columns only autoGroupColumnDef.sortable = false can be used.

The example below demonstrates sorting with Multiple Group Columns.

Mixed Group Sorting

By default, columns only apply sorting to their leaf level row data, as such to sort row groups you should apply the sort to the column on which the grouping has been applied.

This creates the side effect that groups can be sorted in multiple directions simultaneously, the group column reflects this by displaying the multi-sort icon when it does not match one or more of the provided columns sort direction.

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'year',
        rowGroup: true,
        sort: 'desc',
    },
    {
        field: 'handset',
        rowGroup: true,
        sort: 'asc',
    },
]);

<AgGridReact columnDefs={columnDefs} />

In this snippet, sorting on the year or handset column will sort their respective row groups. As the year and handset column have different sorts applied to them, the group column displays the mixed sort icon.

The following example demonstrates mixed group sorting. Note the following:

  • Click the header of the group column to apply a sort, observe how it forces the year and handset columns sort to match.
  • Hold shift and click the header of the year column, observe how the sort direction is now different from the auto column, and the auto column now displays the mixed-sort icon.

Custom Group Sorting

By default, any sort comparator defined on a column that is used to group rows by will also be used by the Group Column. For example, consider the following column definition: