sorting

Tables can be sorted by clicking on the sorting indicators in the column headers. Clicking once will sort the column in ascending order, clicking again will sort the column in descending order. Multiple columns can be sorted simultaneously with the first column clicked having the highest priority.

Disable Sorting

You can disable sorting entirely by setting tableOptions.enableSorting to false.

<DataTable tableOptions={{ enableSorting: false }} />

Disable Sorting for Specific Columns

You can disable sorting for specific columns by setting enableSorting to false in the column definition.

const columns: Columns<Cat> = [
  {
    accessorKey: 'name',
    enableSorting: false, // Disable sorting for this column
    header: 'Name',
  },
  {
    accessorKey: 'age',
    enableSorting: false, // Disable sorting for this column
    header: 'Age',
  },
]

Default Sort State

You can set the default sort state of the table by setting the tableOptions.initialState.sorting prop.

<DataTable
  tableOptions={{
    initialState: {
      sorting: [
        { id: 'name', desc: false }, // Sort by 'name' in ascending order
        { id: 'breed', desc: true }, // Then sort by 'breed' in descending order
      ],
    },
  }}
/>

Descending Sort

You can set descending sort as the default (i.e. sort order on first click) by setting tableOptions.sortDescFirst to true.

<DataTable tableOptions={{ sortDescFirst: true }} />

Descending Sort for Specific Columns

You can set descending sort as the default for specific columns by setting sortDescFirst to true in the column definition.

const columns: Columns<Cat> = [
  {
    accessorKey: 'name',
    header: 'Name',
    sortDescFirst: true, // Descending sort on first click for this column
  },
  {
    accessorKey: 'age',
    header: 'Age',
    sortDescFirst: true, // Descending sort on first click for this column
  },
]

Multi-Column Sorting

Disable Multi-Column Sorting

You can disable multi-column sorting by setting tableOptions.enableMultiSort to false. This will make it so that only one column can be sorted at a time.

<DataTable tableOptions={{ enableMultiSort: false }} />

Limit Number of Sorted Columns

You can limit the number of columns that can be sorted simultaneously by setting tableOptions.maxMultiSortColCount, the default is 3.

<DataTable tableOptions={{ maxMultiSortColCount: 2 }} />

Or you can increase the default limit:

<DataTable tableOptions={{ maxMultiSortColCount: 5 }} />

Query Parameters

Sorting state is pushed to the URL as a query parameter sort, so that when users can share links any sorting they have applied to the table will be preserved for anyone opening the link.

Sort query is encoded as a comma-separated list of column ids, with a - prefix for descending sort.

For example, navigating to ?sort=-age,name will sort the table by age descending and then by name ascending.

Custom Query Parameter Name

You can customize the query parameter name used for pagination by setting tableOptions.queryKeys.sort.

Generally we recommend keeping the default sort value to ensure consistency across your application and user familiarity, however if you are using multiple tables on the same page you need to customize the query parameter names to avoid conflicts.

<DataTable tableOptions={{ queryKeys: { sort: 'my-custom-table-sort' } }} />

Disable Query Parameters

You can also disable query parameters for sorting by setting tableOptions.queryKeys.sort to false.

<DataTable tableOptions={{ queryKeys: { sort: false } }} />