Single and multiple sorting
Click a column heading to cycle through ascending, descending, and no sorting.
Create sy-grid with the website sample order data (orders). - Turn on only: sorting - Properties: multiSort: true
Options
Changes below update the Grid and code immediately.
Click the Quantity header. Click again to change direction; the header arrow indicates the current direction.
View code
Sample data included in the code · 6 rows
Usage guide
#Use sorting to show large quantities first or compare quantities within each team.
Try it yourself
- Sort by one column
Click the Quantity header. Click again to change direction; the header arrow indicates the current direction.
- Add a sort criterion
Sort Team first, then Shift-click Quantity. Teams take priority and quantities are compared within each team.
- Read and clear the result
Inspect column names and directions in sortChanged. Repeatedly clicking the same header cycles back to no sorting.
Displayed row order follows the sort criteria. Order IDs and actual row values remain unchanged.
After sorting, the first displayed row may not be the first source-array row. Find orders by ID.
Useful terms
- Ascending / descending
- Ordering from smaller to larger values, or larger to smaller values.
- sortModel
- An ordered array of sort columns and directions.
Key API examples
Application code that references the registered Grid element as grid.
await grid.setSortModel([{field:'team',direction:'asc'},{field:'quantity',direction:'desc'}]);API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
| multiSort | booleanDefault: false | enable **multi-column sort**. When `true`, shift+click (or shift+Enter/Space on a focused header) appends the column to the ordered sort model / cycles it in place; plain click keeps the single-column cycle and collapses the model to one entry. When `false` (default), interaction behaviour is exactly the single sort. Programmatic `setSortModel` is honoured regardless of this flag. Initial multi-sort seeds from `columnDefs` `sort:` + `sortIndex`. |
Other properties1
| Attribute / Property | Type / Default | Description |
|---|---|---|
| enableMultiSort | booleanDefault: false | Select a name to inspect its type contract. |
Events1
| Events | Detail type | Description |
|---|---|---|
GridSortChangedDetail | Fires when header sorting changes, including reset to unsorted. |
Methods3
| Method / Arguments | Return type | Description |
|---|---|---|
| column: string, direction?: GridSortDirection | null | Promise<void> | Programmatic sort API (single-key semantics). |
| model: ReadonlyArray<{ field: string; direction: 'asc' | 'desc' }> | Promise<void> | replace the whole ordered sort model (AG Grid `sortModel` semantics; array position = priority). Entries are validated: unknown or `sortable: false` columns and malformed entries are dropped, duplicate fields keep the first entry. Honoured regardless of `multi-sort` (the flag gates header interaction, not the programmatic surface). Emits `sortChanged` once with the applied model. |
Promise<SortModelEntry[]> | read the current ordered sort model (defensive copy). |
ColumnDef4
| ColumnDef | Type / Required | Description |
|---|---|---|
booleanOptional | Whether the column is sortable (header click toggles direction). | |
'asc' | 'desc' | nullOptional | Initial sort direction; `null` means unsorted. | |
numberOptional | initial multi-sort priority when several columns declare `sort:` and the grid runs with `multi-sort`. Lower values sort first; omissions and ties fall back to `columnDefs` order. Ignored in single-sort mode . Mirrors AG Grid's `initialSortIndex`. | |
GridCallback<[TValue, TValue, Readonly<TData>, Readonly<TData>], number>Optional | Select a name to inspect its type contract. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.