Use allowUnsort=false if you don't want to allow unsorted state once a column has been sorted.

By default, the <ReactDataGrid /> 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 <ReactDataGrid /> 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.

Sort icons displayed in the column header can be customized by configuring a renderSortTool function prop either on the <ReactDataGrid /> 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 <ReactDataGrid /> 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.

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 }}

When using a custom column.sort function, make sure it always sorts in ascending order! For sorting in descending order, the <ReactDataGrid /> will take care to inverse the result of this function so as to obtain the correct sort order.

Make sure <ReactDataGrid /> 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).

By supporting a function returning a Promise as a dataSource value, the <ReactDataGrid /> 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.