This page describes how to get your grid data sorting.
Turn sorting on for the grid by enabling sorting in the grid options.
Sort a column by clicking on the column header. To do multi-column sorting, hold down shift while clicking the column header.
Custom sorting is provided at a column level by configuring a comparator on the column definition. The sort methods gets the value as well as the row nodes.
Example below shows the following:
To enable animation of the rows after sorting, set grid property animateRows=true.
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 sortOrder on either the gridOptions or the colDef. If defined both in colDef and gridOptions, the colDef will get preference, allowing you to defined a common default, and then tailoring per column.
The example below shows animation of the rows plus different combinations of sorting orders as follows:
Sorting can be controlled via the Sorting API via the following methods:
Both methods work with a list of sort objects, each object containing a sort field and direction. The order of the sort objects depicts the order in which the columns are sorted. For example, the below array represents the model of firstly sorting by country ascending, and then by sport descending.
The example below shows the API in action.
The grid sorts using a default comparator for grouped columns, if you want to specify your own, you can do so specifying it in the colDef:
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.