Data Grid - Sorting

Sorting allows ordering records in the data grid.

Basic sorting

Single column sorting can be triggered with by clicking a column header. Repeat this action to change the sorting direction.

A sorted column can be can pre-configured using the sortModel prop of the GridColDef interface:

<DataGrid
  {...data}
  sortModel={[
    {
      field: 'commodity',
      sort: 'asc',
    },
  ]}
/>

Custom comparator

The grid handles sorting and applies different comparators in columns according to their types. The component handles sorting natively for the following types:

• string
• number
• date
• dateTime

To extend or modify this behavior in a specific column, you can pass in a custom comparator, and override the sortComparator prop of the GridColDef interface.

In the example below, the username column combines name and age, but it is sorted by age using a custom comparator:

<DataGrid sortModel={sortModel} rows={rows} columns={columns} />

Sort order

By default, the sort order cycles between these three different modes:

const sortingOrder = ['asc', 'desc', null];

In practice, when you click a column that is not sorted, it will sort ascending (asc). The next click will make it sort descending (desc). Another click will remove the sort (null), reverting to the order that the data was provided in. This behavior can be overwritten by setting the sortingOrder prop.

In the example below columns are only sortable in descending or ascending order.

<DataGrid
  sortingOrder={['desc', 'asc']}
  sortModel={[
    {
      field: 'commodity',
      sort: 'asc',
    },
  ]}
  {...data}
/>

Disable sorting

By default, all columns are sortable. This can be revoked using the sortable prop of the GridColDef interface:

const columns: GridColDef = [{ field: 'name', sortable: false }];

<DataGrid
  {...data}
  columns={data.columns.map((column) => ({
    ...column,
    sortable: false,
  }))}
/>

Server-side sorting

By default, sorting works client-side. To switch it to server-side, set sortingMode="server". Then you need to handle the onSortModelChange callback, sort the rows on the server-side, and update the rows prop with the newly sorted rows.

<DataGrid
  rows={rows}
  columns={data.columns}
  sortingMode="server"
  sortModel={sortModel}
  onSortModelChange={handleSortModelChange}
  loading={loading}
/>

Multi-column sorting

You can sort by multiple columns at the same time using XGrid. Hold the CTRL key down while clicking the column header.

<XGrid
  {...data}
  sortModel={[
    {
      field: 'commodity',
      sort: 'asc',
    },
    {
      field: 'desk',
      sort: 'desc',
    },
  ]}
/>

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef.

⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.

• getSortModel: Get the sort model currently applied to the grid.
• setSortModel: Set the sort model and trigger the sorting of rows.
• onSortModelChange: Callback fired when the column sorting changed before the grid has sorted its rows.

API

• <DataGrid />
• <XGrid />