Top
DataGrid - Sorting
DataGrid
By default, sorting is enabled in the <DataGrid />, since it is configured with sortable=true. Sorting can be disabled/enabled on the <DataGrid /> as a whole or on specific columns - just specify sortable=true/false or column.sortable=true/false.
Use allowUnsort=false if you don't want to allow unsorted state once a column has been sorted.
By default, the <DataGrid /> is scrolled to the top when sorting. To disable this behaviour, set scrollTopOnSort=false.
For columns with numeric values, make sure you specify column.type="number" to ensure sorting by the numeric value.
Otherwise, the <DataGrid /> will assume string content and will use String.prototype.localeCompare to compare values, which is not what you want for numbers.
Configuring columns to use a custom sort function can be accomplished by using column.sort and specify a function that always sorts records in ascending order.
If you want some default sorting applied, use the defaultSortInfo (uncontrolled) or the sortInfo (controlled) props. For example, sorting in descending order by age means configuring defaultSortInfo={{ name: 'age', dir: -1 }}, just like in the example below.
Sort icons displayed in the column header can be customized by configuring a renderSortTool function prop either on the <DataGrid /> or for a particular column (see columns.renderSortTool).
It can be used to render any valid React.Node instead of the default sort SVG icon. If provided, the <DataGrid /> will call it when rendering the sort icon, and pass the sort direction as the first param: renderSortTool(direction) - so you can use a different sort icon for each sort direction.
Sorting can be single or multiple - meaning you can have only one column sortable at a time or you can have multiple sorted columns. By default, when sortable=true, single sorting is enabled. For multiple sorting, use an array as the sort information - eg defaultSortInfo=[].
The example below illustrates multiple sorting. Records are first sorted by age is ascending order, and then by name in descending order. If you want to unsort a column, simply click it until the sort icon is no longer visible. Adding it to the sort order again can be done by clicking its header again.
When multiple sorting is enabled, the order in which you are adding columns to the sort order is important!
If you're starting from no sorting and click a column header to sort it, and then click another column to sort it too - this will sort records by the first clicked column, and on equal values by the second clicked column. To remove the first column from sorting, click it until the sorting icon is no longer visible. Then the records will be sorted by the remaining columns. Adding new columns to the sorting will keep the initial sorting, and on equal values, will use those columns to determine the correct sort order.
If you want to enable multiple sorting, without specifying a default sort information, use defaultSortInfo={[]} or sortInfo={[]}
If you want to specify some initial sorting, specify an array of objects with the name of the columns you want to sort by, and a dir property with 1(stands for ascending order) or -1 (stands for descending order).
For example, sortInfo={[{ name: 'age', dir: 1 }, { name: 'name', dir: -1 }]} sorts by age in ascending order, and then, on equal age values, sorts by name, in descending order.
Single sorting by age in descending order can be accomplished by specifying sortInfo={{ name: 'age', dir: -1 }}
As mentioned at the beginning of the article, custom sorting can be accomplished in two ways:
  • Specify a column.type to match the type of the values in the column. For now, supported types are just "string" and "number"
  • Specify a custom column.sort function. NOTE: This function should always sort items in ascending order!
When using a custom column.sort function, make sure it always sorts in ascending order! For sorting in descending order, the <DataGrid /> will take care to inverse the result of this function so as to obtain the correct sort order.
Make sure <DataGrid /> column.sort function respects the contract specified by Array.prototype.sort - so you need to make sure it can be passed to [].sort.
The column.sort function will be called with two arguments, the corresponding values for the column from the dataSource (eg: for the age column, it would be called with two numbers, the age values from the currently compared records).
If the column specifying a column.sort function does not have a column.name property, column.sort will be called with two arguments which are two items from the dataSource (as opposed to being called with the corresponding properties for the column extracted from those dataSource items).
Besides customizing renderSortTool, you can also customize the position of the sort tool using columns.renderHeader (which can be used to customize/render basically anything in the header). The example below shows a demo with a custom sort tool positioned before the column title.
Sorting can be controlled or uncontrolled.
In uncontrolled sorting the <DataGrid /> does all the hard work and sorts the dataSource for you<DataGrid /> Internally it also keeps the unsorted version of the dataSource so it can restore it when allowUnsort=true (which is the default).
For uncontrolled sorting to work as expected, you need to ensure the proper column.type is specified for columns and that column.sort is used correctly. Other than that, you can also hook into onSortInfoChange to get notified of changes in the sort order.
In controlled sorting, the <DataGrid />not perform any sorting of the dataSource itself - so you are on your own to sort it correctly. If you provide an initial sortInfo, make sure the dataSource is also sorted accordingly.
As a bottom line, you have to ensure the sortInfo and the dataSource are always in sync. In this case, the sole purpose of specifying the sortInfo prop is to correctly display the sort indicators in column headers and to trigger onSortInfoChange with a correct sortInfo parameter.
When the <DataGrid /> is configured with a remote dataSource, most often you will want sorting to be done on the server. In this case, the <DataGrid /> needs to send the sort information to the server in a way or another. This can be achieved by specifying a function (that returns a Promise) as a dataSource.
Using a function as a dataSource allows the developer to send the sorting information to the remote server in various ways - eg: appended to the query string; inside the request body, etc. In addition to the sort information, when pagination is used, pagination data will also need to be sent to the remote endpoint, as well as any filtering data that may apply.
By supporting a function returning a Promise as a dataSource value, the <DataGrid /> offers all flexibility one needs to make an async request to an endpoint in order to fetch data. Be it GraphQL, REST, jsonp calls, or any other form of async data fetching, you can use whatever you want and send the sorting info in any format to the server as long as you return a Promise which is resolved to an array or to an object that contains data: Array, count: Number.
The rules of immutability stated before apply, so make sure you pass a reference to the same promise/function when you want to render the same-exact dataSource.