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={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 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}
  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 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 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.

applySorting()

Applies the current sort model to the rows.

Signature:

applySorting: () => void

getRowIdFromRowIndex()

Gets the GridRowId of a row at a specific index. The index is based on the sorted but unfiltered row list.

Signature:

getRowIdFromRowIndex: (index: number) => GridRowId

getRowIndex()

Gets the row index of a row with a given id. The index is based on the sorted but unfiltered row list.

Signature:

getRowIndex: (id: GridRowId) => number

getSortedRowIds()

Returns all row ids sorted according to the active sort model.

Signature:

getSortedRowIds: () => GridRowId[]

getSortedRows()

Returns all rows sorted according to the active sort model.

Signature:

getSortedRows: () => GridRowModel[]

getSortModel()

Returns the sort model currently applied to the grid.

Signature:

getSortModel: () => GridSortModel

setSortModel()

Updates the sort model and triggers the sorting of rows.

Signature:

setSortModel: (model: GridSortModel) => void

sortColumn()

Sorts a column.

Signature:

sortColumn: (column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) => void

Selectors

gridSortModelSelector

Get the current sorting model.

Signature:

gridSortModelSelector: (state: GridState) => GridSortModel

Example

const sortModel = gridSortModelSelector(
  apiRef.current.state
);

gridSortedRowEntriesSelector

Get the id and the model of the rows after the sorting process.

Signature:

gridSortedRowEntriesSelector: (state: GridState) => { id: GridRowId; model: { [key: string]: any } }[]

Example

const sortedRowEntries = gridSortedRowEntriesSelector(
  apiRef.current.state
);

gridSortedRowIdsSelector

Get the id of the rows after the sorting process.

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