Column Sorting
The grid supports two mode of sorting
- Single column sorting
- Multi column sorting
The default is multi column sorting. To enable single column sorting, set the enableMultiColumnSort prop to false on sortOptions prop of the GridOptions interface.
Single column sorting
Notice that the sort number is not visible on the header of the column that is currently sorted. This is because we turned off multi column sorting. The top left sort icon is also not visible. Now, lets contrast this with what the default behavior is.
Multi column sorting
Notice that the sort number is visible on the header of the column that is currently sorted. This is because we turned on multi column sorting. The top left sort icon is also visible. Clicking on the sort icon in the top left will add the column to the sort instead of clearing the sort and sorting on the column that was clicked. Additionally, clicking with the control or meta key held down will also add the column to the sort.
Initial sort
For the initial sort, you can set the initialSort prop on the sortOptions prop of the GridOptions interface. This is what this looks like
sortOptions: ({
initialSort: new Map([["id",
{
sortColumn: "id",
isAscending: true,
}]]
)
}),
As you can see, the initialSort prop is a Map of SortColumn objects. The key of the Map is the sortColumn prop of the SortColumn object. The value of the Map is the SortColumn object itself. The sortColumn prop is the name of the column to sort on. The isAscending prop is a boolean that determines whether the sort is ascending or descending.
To specify mutiple values,
sortOptions: ({
initialSort: new Map([["id",
{
sortColumn: "id",
isAscending: true,
sortIndex: 1,
}],
["firstName",
{
sortColumn: "firstName",
isAscending: false,
sortIndex: 2,
}]]
)
}),
Lets look at an example of this in action
And here is what it looks like for multiple columns