Sorting
View sourceClick a header to sort. Shift-click another header to add a secondary sort. Per-column comparator and ‘sortable: false’ opt-out are both first-class.
Try this
The Region column is opt-out (sortable: false) — clicking its header does nothing.
- Click "Customer" — sorts ascending. Click again — descending. Third click — clears.
- Click "Status". Then Shift+click "Customer". Now you have a multi-sort.
- Right-click any header for sort actions in the context menu.
- Click "Region" — nothing happens; it's opted out.
How sorting works
- Per column.
sortable: trueis the default. Setfalseto opt out. - Multi-sort. Hold Shift while clicking headers. The first column is the primary sort, subsequent columns break ties.
- Custom comparator. Pass
comparator: (a, b, rowA, rowB) => numberon the column. Useful for natural-numeric strings, locale-aware ordering, or business rules like "active before pending before closed". - Controlled mode. Set
sort+onSortChangeto drive sort from outside (URL state, saved views, parent component). Omit them and the grid manages its own sort state.