Vue Data Grid: Row Grouping - Sorting Groups
This section provides details on how to configure and customise how row groups are sorted.
Enabling Group Sorting
When using Single Group Column or Multiple Group Columns, sorting can be enabled through the sortable
column property as shown below:
<ag-grid-vue
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.defaultColDef = {
// enable sorting across all columns - including Row Group Columns
sortable: true,
};
this.autoGroupColumnDef = {
// enabled sorting on Row Group Columns only
sortable: true,
};
// also applies to the 'multipleColumns' display type
this.groupDisplayType = 'singleColumn';
It is common to simply define defaultColDef.sortable = true
across all columns, which includes row group columns.
However, in cases where it is preferable to define sorting on the Row Group Columns directly,
autoGroupColumnDef.sortable = true
can be used.
Sorting is also enabled using the sortable
column property with Custom Group Columns, as shown below:
<ag-grid-vue
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:groupDisplayType="groupDisplayType"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{
cellRenderer: 'agGroupCellRenderer',
showRowGroup: true,
// enabled sorting on this Row Group Column only
sortable: true,
},
];
this.defaultColDef = {
// enable sorting across all columns - including Row Group Columns
sortable: true,
};
this.groupDisplayType = 'custom';
When using the Group Rows Display Type there are no group columns to sort by, however row groups can still be ordered through the Default Group Order.
The example below demonstrates how sorting is enabled with Multiple Group Columns.
Note that sorting is enabled across all columns, including Row Group Columns, using: defaultColDef.sortable = true
.
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:
<ag-grid-vue
:columnDefs="columnDefs"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{
field: 'month',
rowGroup: true,
comparator: (a, b) => {
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September','October', 'November', 'December'];
// sorts 'months' in chronological order
return months.indexOf(a) - months.indexOf(b);
},
},
];
As rowGroup = true
is defined on this column, the supplied comparator
will be used to sort the month
column and
the Group Column.
The following example demonstrates custom group sorting. Note the following:
- The
month
column has a custom sortcomparator
supplied which sorts months in chronological order. - The 'Group' Column uses the
comparator
defined on themonth
column definition to sort the row groups.
It is also possible to define a comparator that will be used across all group levels using; autoGroupColumnDef.comparator
.
This 'shared group comparator' will take precedence over any comparators defined on the underlying columns.
Maintain Group Order
When sorting on non-group columns it may be desirable to maintain the existing group order. This behaviour can be
enabled through the groupMaintainOrder
grid option as shown below:
<ag-grid-vue
:columnDefs="columnDefs"
:groupDisplayType="groupDisplayType"
:groupMaintainOrder="groupMaintainOrder"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'assignee', rowGroup: true, hide: true },
{ field: 'priority', rowGroup: true, hide: true },
{ field: 'task' },
];
this.groupDisplayType = 'multipleColumns';
// preserves current group order when sorting on non-group columns
this.groupMaintainOrder = true;
Note that Group Order is not the same as sorting. Maintaining group order will not preserve active group sorts, just the current order of the groups. However, when sorting on group columns the group order will be changed based on the sort.
The following example demonstrates how groupMaintainOrder
works. Note the following:
groupMaintainOrder = true
is defined on the grid options supplied to the grid.- Clicking on the 'Task' column header only sorts the tasks without reordering the groups.
- Sorting on the 'Assignee' or 'Priority' group column headers will reorder the groups.
Next Up
Continue to the next section to learn about Row Group Filtering.