Row Sorting

Introduction

Mark a column sortable and users can click its header to sort by that column. Clicking cycles the direction: ascending → descending → unsorted. Sorting is built in — @zengrid/core installs the sort plugin automatically, with multi-column layering enabled — so there’s nothing to wire up beyond the flag.

const columns = [
  { field: 'name',   header: 'Name',   sortable: true },
  { field: 'region', header: 'Region', sortable: true },
  { field: 'revenue', header: 'Revenue', sortable: true },
];

You can also drive sorting from code through grid.sort:

Method	Effect
grid.sort.toggle(col)	Cycle a column asc → desc → off (as a header click does).
grid.sort.apply(state)	Set an explicit sort state (single or multi-column).
grid.sort.clear()	Remove all sorting.
grid.sort.getState()	Read the current SortState[].

A SortState is { column, direction: 'asc' | 'desc', sortIndex? }, where sortIndex orders the keys in a multi-column sort.

Try it live

Each tab is a different sorting setup. Click headers to sort, edit the code, or use the buttons to apply preset orders — the grid re-sorts instantly.

Click to sortDefault sortMulti-columnCustom icons

CodeDemoSplit

ResetRun ⌘⏎

Click any sortable header to cycle asc → desc → unsorted. Non-sortable columns (Role) stay put.

Single vs. multi-column

A header click sorts by one column. To sort by several at once — Region, then Revenue within each region — layer the keys with sortIndex, either by Shift-clicking headers or by passing the full state to grid.sort.apply(). The Multi-column tab above shows both.

Next

• Row Data — supply the rows to sort.
• Row Pagination — sort then page.