Enable sorting for columns by setting the
sortable column definition attribute.
You can then sort a column by clicking on the column header.
To enable sorting for all columns, set sorting in the default column definition.
Custom sorting is provided at a column level by configuring a comparator on the column definition.
The parameters are as follows:
valueA, valueB: The values in the cells to be compared. Typically sorts are done on these values only.
nodeA, nodeB: The Row Nodes for the rows getting sorted. These can be used if more information, such as data from other columns, are needed for the comparison.
Example: Custom Sorting
Example below shows the following:
- Default sorting on the Athlete column.
- When the Year column is not sorted, it shows a custom icon (up/down arrow).
- The Date column has strings as the row data, but has a custom comparator so that when you sort this column it sorts as dates, not as strings.
Example: Custom Sorting Groups
When Row Grouping it is possible to override the sort order
of the Row Group columns. If using the Auto Group Column, provide a comparator via the
autoGroupColumnDef grid property.
Multi Column Sorting
It is possible to sort by multiple columns. The default action for multiple column sorting is for
the user to hold down
Shift while clicking the column header. To change the default action to use
Ctrl key (or
Cmd key on Apple) instead set the property
The example below demonstrates the following:
- The grid sorts by Country then Athlete by default.
multiSortKey='ctrl'is set so multiple column sorting is achieved by holding down
Ctrland selecting multiple columns.
To enable animation of the rows after sorting, set grid property
By default, the sorting order is as follows:
ascending -> descending -> none.
In other words, when you click a column that is not sorted, it will sort ascending. The next click will make it sort descending. Another click will remove the sort.
It is possible to override this behaviour by providing your own
sortingOrder on either
gridOptions or the
colDef. If defined both in
colDef will get preference, allowing you to define a common default,
and then tailor per column.
Example: Sorting Order and Animation
The example below shows animation of the rows plus different combinations of sorting orders as follows:
- Grid Default: ascending -> descending -> no sort
- Column Athlete: ascending -> descending
- Column Age: descending -> ascending
- Column Country: descending -> no sort
- Column Year: ascending only
What sorting is applied is controlled via Column State. The below examples uses the Column State API to control column sorting.
By default sorting doesn't take into consideration locale-specific characters. If you need to make your sort
locale-specific you can configure this by setting the property
gridOptions.accentedSort = true
Using this feature is more expensive; if you need to sort a very large amount of data, you might find that this causes the sort to be noticeably slower.
The following example is configured to use this feature.
It is also possible to perform some post-sorting if you require additional control over the sorted rows.
This is provided via the grid callback function:
gridOptions.postSort as shown below:
The following example uses this configuration to perform a post-sort on the rows.