Sorting

Sorting is on by default. Click a column header to cycle ascending → descending → unsorted; the header shows the current direction and the column-actions menu offers explicit sort/clear items.

Multi-column sorting

Enable enableMultiSort to sort by several columns at once (shift-click headers). An order badge indicates each column's position in the sort.

const table = useDataTable({
  data,
  columns,
  enableMultiSort: true,
  initialState: {
    sorting: [
      { id: "department", desc: false },
      { id: "salary", desc: true },
    ],
  },
})

Per-column control

Sorting is standard TanStack, so the usual column knobs apply:

• enableSorting: false — disable sorting for a column.
• sortDescFirst: true — start from descending (handy for numeric columns).
• sortFn — a built-in sort function's name, a comparator, or the name of one of your own from the sortFns option.

const columns: DataTableColumnDef<Person>[] = [
  { accessorKey: "id", header: "ID", enableSorting: false },
  { accessorKey: "salary", header: "Salary", sortDescFirst: true },
]

To reuse a comparator across columns, register it by name with sortFns:

const PRIORITY = ["low", "medium", "high"]

const table = useDataTable({
  data,
  columns: [{ accessorKey: "priority", header: "Priority", sortFn: "byPriority" }],
  sortFns: {
    byPriority: (rowA, rowB, columnId) =>
      PRIORITY.indexOf(rowA.getValue(columnId)) -
      PRIORITY.indexOf(rowB.getValue(columnId)),
  },
})

Controlled sorting

Pass state.sorting and onSortingChange to control it yourself — for example to sort on the server (manualSorting: true).

const [sorting, setSorting] = React.useState([])
const table = useDataTable({
  data,
  columns,
  state: { sorting },
  onSortingChange: setSorting,
  manualSorting: true,
})

Related

• TanStack Table sorting guide.