Column sorting

Clicking a header's sort toggle with sortableColumns, and stacking with Shift-click.

Last updated August 24, 2026

sortableColumns turns on a clickable sort toggle in every header, unless a column sets its own sortable to override the grid. A plain click sorts by that column alone, cycling ascending, descending, and off; Shift-click adds or updates the column in a priority-ordered stack instead of replacing it — sort by Id ascending, then by Application.Name descending as a tiebreaker.

Click to sort, Shift-click to stack#

sortableColumns

Live example

This example runs as a real project on StackBlitz.

Open in StackBlitz

<DataGridComponent
  columns={columns}
  dataSource={rows}
  sortableColumns
  onColumnSortChange={({ sort }) => persist(sort)}
/>;

Props#

Prop	Type	Default	Description
`sortableColumns`	`boolean`	`false`	Whether columns can be sorted by clicking their header toggle.
`defaultColumnSort`	`readonly { columnId, direction }[]`		The sort to start with, in priority order. Uncontrolled.
`onColumnSortChange`	`(event: ColumnSortEvent) => void`		Called once when the user changes the sort — a toggle, a stack, or a clear back to "none".
`column.sortable`	`boolean`		Per-column override of sortableColumns.

Keyboard & pointer interactions#

Click a header's sort toggle to cycle it through ascending, descending, and off.
Shift-click a toggle to add or update that column in the sort's stack instead of replacing it.
With a header focused, Alt+ArrowUp cycles its sort the same way a click does; Alt+Shift+ArrowUp stacks it the same way a Shift-click does.

Reading sort state outside the grid's own tree#

useColumnSortState subscribes to the grid's active sort through its ref, for a sort indicator living elsewhere on the page:

import { useRef } from "react";
import {
  DataGridComponent,
  useColumnSortState,
  type DataGridApi,
} from "@gridkitjs/react";

function SortIndicator({ gridRef }: { gridRef: RefObject<DataGridApi<Row> | null> }) {
  const sort = useColumnSortState(gridRef);
  return <p>{sort.map((entry) => `${entry.columnId} ${entry.direction}`).join(", ")}</p>;
}

Read-only: DataGridApi has no sort-mutating action — sort stays uncontrolled via defaultColumnSort/the grid's own header toggle. Before the grid mounts, it reads as an empty array. See imperative handle for getColumnSort/subscribe, and row grouping for useGroupByState's equivalent.

Edit this page on GitHub