This section provides details on how to configure and customise how row groups are sorted.
Sorting Row Groups
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.
When using groupDisplayType with a Single Group Column and the columns with row grouping applied have different sort directions, the group column will instead display the mixed sort icon.
<ag-grid-vue
:columnDefs="columnDefs"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', rowGroup: true, sort: 'desc' },
{ field: 'year', rowGroup: true, sort: 'asc' },
// ...other column definitions
];
this.groupDisplayType = 'singleColumn';Custom Row Group Sorting
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.
When using custom group sorting, sorting the Group column no longer impacts the columns with row grouping, and vice versa.
The example above demonstrates a configuration which ignores the data entirely, preferring to sort the rows by the number of descendants:
<ag-grid-vue
:columnDefs="columnDefs"
:autoGroupColumnDef="autoGroupColumnDef"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', rowGroup: true },
{ field: 'year', rowGroup: true },
// ...other column definitions
];
this.autoGroupColumnDef = {
comparator: (valueA, valueB, nodeA, nodeB) => {
return nodeA.allLeafChildren.length - nodeB.allLeafChildren.length;
},
};Unsorted Group Order
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.
As this is an initial order of groups, it executes before filtering and aggregation. This means it cannot use post-filtered data, or aggregated values as comparison criteria.
The example above demonstrates the following configuration to order group rows based on the number of leaf children:
<ag-grid-vue
:initialGroupOrderComparator="initialGroupOrderComparator"
/* other grid options ... */>
</ag-grid-vue>
this.initialGroupOrderComparator = (params) =>
params.nodeA.allLeafChildren.length - params.nodeB.allLeafChildren.length;