Skip to content

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:

<DataGrid
  {...data}
  sortModel={sortModel}
  onSortModelChange={(model) => setSortModel(model)}
/>

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 property 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}
  onSortModelChange={(model) => setSortModel(model)}
/>

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={sortModel}
  onSortModelChange={(model) => setSortModel(model)}
  {...data}
/>

Per-column sort order

Sort order can be configured (and overridden) on a per-column basis by setting the sortingOrder property of the GridColDef interface:

const columns: GridColDef = [
  { field: 'quantity', sortingOrder: ['desc', 'asc', null] },
];
<DataGrid
  {...data}
  columns={data.columns.map((column) => ({
    ...column,
    sortingOrder:
      column.field === 'quantity' ? ['desc', 'asc', null] : undefined,
  }))}
  sortingOrder={['asc', 'desc', null]}
/>

Disable sorting

By default, all columns are sortable. This can be revoked using the sortable property 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 DataGridPro. Hold down the CTRL or Shift (use ⌘ Command on macOS) key while clicking the column header.

<DataGridPro
  {...data}
  sortModel={sortModel}
  onSortModelChange={(model) => setSortModel(model)}
/>

apiRef

⚠️ Only use this API as the last option. Give preference to the props to control the grid.

Signature:
applySorting: () => void
Signature:
getRowIdFromRowIndex: (index: number) => GridRowId
Signature:
getRowIndex: (id: GridRowId) => number
Signature:
getSortedRowIds: () => GridRowId[]
Signature:
getSortedRows: () => GridRowModel[]
Signature:
getSortModel: () => GridSortModel
Signature:
setSortModel: (model: GridSortModel) => void
Signature:
sortColumn: (column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) => void

Selectors

Signature:
gridSortModelSelector: (state: GridState) => GridSortModel
Example
const sortModel = gridSortModelSelector(
  apiRef.current.state
);
Signature:
gridSortedRowEntriesSelector: (state: GridState) => { id: GridRowId; model: { [key: string]: any } }[]
Example
const sortedRowEntries = gridSortedRowEntriesSelector(
  apiRef.current.state
);
Signature:
gridSortedRowIdsSelector: (state: GridState) => GridRowId[]
Example
const sortedRowIds = gridSortedRowIdsSelector(
  apiRef.current.state
);

More information about the selectors and how to use them on the dedicated page

API