Sorting

Users click a header to sort: ascending, descending, then off. The sort is written to the URL (?sort=-amount,customer), so a shared link or a reload shows the same order. See URL state.

How users sortCopy Anchor Link

• Click a header to sort by that column only. Each click goes ascending, descending, then off.
• Shift+click adds the column to the sort instead of replacing it. A small number after the title shows its place in the sort.
• The column menu (the header's ⋯, or a right-click) has Ascending, Descending and Clear sort.
• With the keyboard, Tab to the header's title and press Enter or Space.

Headers have aria-sort, so screen readers hear the order. A new sort goes back to page 1 and clears the selection.

In your column definitionsCopy Anchor Link

column.accessor("amount", { header: "Amount", sortDescFirst: true })
column.accessor("id", { header: "Order #", enableSorting: false })

In the URL optionsCopy Anchor Link

url in useDataTable sets the rest. See URL state for every option.

Only sortable columns are read from ?sort=, so a link like ?sort=secret_field is ignored and never reaches your backend. The table works out the list from your columns. The server needs the same list when it reads the URL: see Rendering on the server.

Turn sorting offCopy Anchor Link

For one column, enableSorting: false in its definition. For every column, enableSorting: false in useDataTable:

const table = useDataTable({
  data,
  columns,
  getRowId: (order) => order.id,
  enableSorting: false, 
})

Headers then don't sort, the column menus have no sort items, and the URL's sort is ignored. In client mode the rows keep the order of data; in server mode url.defaultSorting still goes to your backend.

In server mode, pass enableSorting: false to useTableQuery too. When the page is rendered on the server, put sortableColumns: [] in the URL options parseTableParams reads. Both then ignore sort like the table does.

From codeCopy Anchor Link

table.setSorting([{ id: "amount", desc: true }])
column.toggleSorting(false) // ascending, replacing the sort
column.toggleSorting(true, true) // descending, added to the sort
column.getIsSorted() // "asc", "desc" or false
table.resetSorting() // back to url.defaultSorting

The URL follows, and the page goes back to 1.