Sort list
The data-grid-sort-list add-on: a toolbar button and popover to add, remove, and reorder sorts.
Click-to-sort headers work without any add-on, but data-grid-sort-list gives users a toolbar
button and popover to add, remove, and reorder sorts without touching the headers. This is
useful when columns are narrow, or when you prefer not to rely on shift-click for
multi-column sort.
pnpm dlx shadcn@latest add @gridcn/data-grid-sort-list
import { DataGridSortList } from "@/components/data-grid-sort-list/data-grid-sort-list";
<DataGridProvider {...grid} columns={columns}>
<DataGridToolbar>
<DataGridSortList />
</DataGridToolbar>
<DataGridRoot>
<DataGridHeader />
<DataGridBody />
</DataGridRoot>
</DataGridProvider>;Each row has a column select, an ascending/descending select, a remove button, and a drag handle.
Precedence is array order in SortSpec[], changed by dragging the drag handle (@dnd-kit/react) or
through the keyboard (see below). It reads and writes the same useDataGridSortState() and
useDataGridActions().setSorts() as click-to-sort headers, so the two UIs stay in sync
automatically. The button shows a count badge once one or more sorts are applied, matching the
badge of DataGridFilterMenu.
| Prop | Type | Default | Description |
|---|---|---|---|
allColumns | boolean | false | Lists every column in the select, including hidden ones, instead of only the visible columns. |
Keyboard & accessibility
| Key | Action |
|---|---|
| Tab | Moves through a row's controls, in order: column select, direction select, remove, drag handle |
| ArrowUp / ArrowDown (drag handle focused) | Moves that sort row one position up/down, which changes precedence |
| Space / Enter (drag handle focused) | Picks up/drops the row for pointer-equivalent keyboard dragging (@dnd-kit/react's keyboard sensor) |
| Backspace / Delete (drag handle focused) | Removes that sort row |
Plain ArrowUp or ArrowDown on a focused drag handle always moves the row by exactly one position.
The keyboard sensor of @dnd-kit/react also offers its own gesture for that key, but gridcn
checks the plain arrow press first, and it wins. Every reorder announces the change through a polite
aria-live region (labels.sort.sortReorderAnnouncement, for example "Age sort moved to
position 1 of 2"). Focus never gets lost. After a reorder, focus stays on the moved row's drag handle.
After deleting a row, focus moves to the next row's drag handle, or to the "Add sort" button once the
list is empty.
Related
- Sorting, filtering & search: the core sort behavior and
headerClickBehavior - Toolbar: the frame the button lives in