# How to customise the DataGrid default sorting

Published: 2024-02-02  
Author: admin  
Tags: sorting

Canonical page: https://infinite-table.com/blog/2024/02/02/how-to-configure-default-sorting

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`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultSortInfo) prop, as either an object, for sorting by a single column, or an array of objects, for sorting by multiple columns.

```tsx title="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.

For sorting to work properly for numeric columns, don't forget to specify `type: "number"` in the [column configuration](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type).

[CodeSandbox demo](https://codesandbox.io/s/default-sort-order-react-datagrid-54dzny)

When the [`defaultSortInfo`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultSortInfo) is an array, the DataGrid will know you want to allow sorting by multiple columns.

See our page on [multiple sorting](https://infinite-table.com/docs/learn/sorting/multiple-sorting.md) 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`](https://infinite-table.com/docs/reference/infinite-table-props.md#sortInfo) should trigger a reload (via the [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/infinite-table-props.md#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](https://infinite-table.com/docs/reference/infinite-table-props.md#shouldReloadData.sortInfo).

In this case, it's your responsability to send the `sortInfo` to your backend using the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#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).

```tsx
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](https://codesandbox.io/s/vigilant-lena-shs2td)

## Responding to sorting changes

When the user changes the sorting in the React DataGrid UI, the DataSource [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#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 `](https://infinite-table.com/docs/reference/datasource-props#onSortInfoChange ) callback prop.

If you use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) instead of the uncontrolled [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo), you will need to configure the [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#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`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderHeader) and in the column cells - see [`columns.renderValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue).

[Customising the column header depending on the sort info](https://codesandbox.io/s/heuristic-butterfly-v5k6v7)

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

Via the [`columns.renderHeader`](https://infinite-table.com/docs/reference/infinite-table-props.md#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.