JavaScript Data GridRow Grouping - Sorting

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

Sorting Row Groups Copy Link

Row Groups are Sorted by the column that they are grouped by, and use any Custom Sorting configured on that column. Applying a sort to a group column generated by groupDisplayType will apply the sort to the row grouped columns it represents.

The example above demonstrates that sorting the country and year columns will sort the row groups, and clicking to sort the Group column applies sorting to the country and year columns.

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true, sort: 'desc' },
        { field: 'year', rowGroup: true, sort: 'asc' },
        // ...other column definitions
    ],
    groupDisplayType: 'singleColumn',

    // other grid options ...
}

Custom Row Group Sorting Copy Link

The generated Group Columns can be unlinked from the columns with row grouping by configuring Custom Group Sorting using a autoGroupColumnDef.comparator. This allows custom sorting to be applied across all levels of row grouping.

The example below demonstrates a configuration that ignores the data entirely, sorting rows by the number of descendants instead:

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true },
        { field: 'year', rowGroup: true },
        // ...other column definitions
    ],
    autoGroupColumnDef: {
        comparator: (valueA, valueB, nodeA, nodeB) => {
            return nodeA.allLeafChildren.length - nodeB.allLeafChildren.length;
        },
    },

    // other grid options ...
}

Maintain Group Order Copy Link

By default, sorting on a non-group column reorders groups based on the sort. To keep groups in their structural order while only sorting the rows within each group, enable groupMaintainOrder:

const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true, hide: true },
        { field: 'athlete' },
    ],
    groupMaintainOrder: true,

    // other grid options ...
}

With groupMaintainOrder=true:

• Sorting a leaf column sorts the rows inside each group; groups stay in structural order.
• Filter changes preserve group order.
• Transactions add new groups at their structural position: the end of the data-insertion order, or the position produced by initialGroupOrderComparator if one is configured.
• With multi-level row grouping, the order is maintained per level. Sorting a group column at one level only re-orders that level's groups; sibling levels keep their structural order. For example, with country and year grouping, sorting year re-orders year groups within each country, while country groups remain in their structural slot.

The example above uses groupDisplayType: 'multipleColumns' so each group level has its own header. Try the following to see per-level isolation:

• Sort Athlete or Total (leaf columns): only the rows inside each year group reorder; year and country groups keep their structural order.
• Sort the Year group column: only year groups within each country reorder; country groups stay structural.
• Sort the Country group column: only country groups reorder; year groups within each country keep their structural order.
• Clear a group-column sort: that level reverts to structural order; sibling levels are unaffected.

The structural order is the data-insertion order by default, or the order produced by initialGroupOrderComparator if one is configured. If a group column had a sort applied and the user later explicitly clears that sort, the structural order is restored.

Unsorted Group Order Copy Link

When no sorting is applied, the groups are ordered by the order in which they appear in the data. This order can be overwritten with a custom initial order by providing an initialGroupOrderComparator grid option.

The example above demonstrates the following configuration to order group rows based on the number of leaf children:

const gridOptions = {
    initialGroupOrderComparator: (params) =>
        params.nodeA.allLeafChildren.length - params.nodeB.allLeafChildren.length,

    // other grid options ...
}