JavaScript Data GridRow Grouping - Group OrderEnterprise
This section provides details on how to control the 'Group By' order and the default ordering of groups.
By default, the grid will group rows based on the order of the supplied column definitions. To explicitly define the
row 'Group By' order, use rowGroupIndex
with / without rowGroup = true
as shown below:
const gridOptions = {
columnDefs: [
// index = 1, gets grouped second
{ field: "country", hide: true, rowGroupIndex: 1 },
// index = 0, gets grouped first
{ field: "year", hide: true, rowGroupIndex: 0 },
],
// other grid options ...
}
In the snippet above, year
has a lower rowGroupIndex
than country
which means it will be grouped first. The
rowGroupIndex
values can be any number that is either positive or zero and gaps are permitted.
The following example shows how the rowGroupIndex
can be used to ensure rows are grouped by 'year' first and then
country
even though the country
column definition is supplied to the grid first.
The grid does not attempt to order the groups. The groups are presented on a 'first come, first served' basis. For example if grouping by country, and the first row is for country 'Ireland', then the first displayed group will be 'Ireland'.
For most scenarios, this will not be a problem as the user can sort the grouping column. However, this will be a problem in one of the following cases:
- The grid is using the Group Rows Display Type, which means there are no columns associated with the groups to order.
- The groups have an implied order that should not require column sorting to achieve. For example grouping by month (January, February...) or other groups which have business meaning that require order e.g. ["Severe", "Medium", "Low"] or ["Today", "Yesterday", "Older than 1 day"].
To provide a group order, you should supply initialGroupOrderComparator
callback to the grid. The callback is a standard
JavaScript Array comparator that takes two values and compares them.
The example below shows providing an initial group order. From the example the following can be noted:
- Groups are displayed using the Group Rows Display Type, i.e. there is no column to click to sort the groups.
- Groups are ordered alphabetically using a
initialGroupOrderComparator
.
Continue to the next section to learn about the Sticky Groups.