How to customise the DataGrid default sorting

By admin·

In this article, we'll show you how easy it is to configure the default sorting for the React DataGrid.

Using the defaultSort prop on the DataSource

Sorting is configured on the DataGrid <DataSource /> component. For this, you use the defaultSortInfo prop, as either an object, for sorting by a single column, or an array of objects, for sorting by multiple columns.

Specifying a default sort order
// sort by country DESC and salary ASC
const defaultSortInfo={[
  { field: "country", dir: -1 },
  { field: "salary", dir: 1 },
]}

<DataSource defaultSortInfo={defaultSortInfo} />

That's it! Now, when the DataGrid is first rendered, it will be sorted by the country column in descending order, and then by the salary column in ascending order.

Note

For sorting to work properly for numeric columns, don't forget to specify type: "number" in the column configuration.

Note

When the defaultSortInfo is an array, the DataGrid will know you want to allow sorting by multiple columns.

See our page on multiple sorting for more details.

Local vs remote sorting

The above example uses local sorting. If you don't explicitly specify a that changes in the sortInfo should trigger a reload (via the shouldReloadData.sortInfo prop), the sorting will be done locally, in the browser.

However, you can also have remote sorting - for this scenario, make sure you use shouldReloadData.sortInfo=true.

Note

In this case, it's your responsability to send the sortInfo to your backend using the data prop of the DataSource - your data function will be called by the DataGrid whenever sorting changes. The arguments the function is called with will include the sort information (along with other details like filtering, grouping, aggregations, etc).

const dataSource: DataSourceData<Developer> = ({ sortInfo }) => {
  if (sortInfo && !Array.isArray(sortInfo)) {
    sortInfo = [sortInfo];
  }
  const args = [
    sortInfo
      ? 'sortInfo=' +
        JSON.stringify(
          sortInfo.map((s) => ({
            field: s.field,
            dir: s.dir,
          })),
        )
      : null,
  ]
    .filter(Boolean)
    .join('&');

  return fetch('https://your-backend.com/fetch-data?' + args)
    .then((r) => r.json())
    .then((data: Developer[]) => data);
};
Remote sorting example

Responding to sorting changes

When the user changes the sorting in the React DataGrid UI, the DataSource data function is called for you, with the new sort information.

However, you might want to respond in other ways - for this, you can use onSortInfoChange callback prop.

Note

If you use the controlled sortInfo instead of the uncontrolled defaultSortInfo, you will need to configure the onSortInfoChange callback to respond to sorting changes and update the UI.

Using the column sort info for rendering

At runtime, you have access to the column sort information, both in the column header - see columns.renderHeader and in the column cells - see columns.renderValue.

Customising the column header depending on the sort info

For example, you can customise the icon that is displayed in the column header to indicate the sort direction.

Via the columns.renderHeader you have full access to how the column header is rendered and can use the sorting/filtering/grouping/aggregation/pivoting information of that column to customise the rendering.

PreviousHow to customise the DataGrid loading stateNextMaster detail is now available in the Infinite React DataGrid