Demo / Plugins/ Base / Sorting
npm package:
@omnigrid/sorting-pluginSimple sorting
Click a column header to sort by that column. Use click + Ctrl to sort multiple columns.
Predefined sorting
Use the sortState prop to sort by a specific column.
Disable sorting
Set sortable={false} on a column to prevent it from being sorted. Disabled columns drop the sort affordance and ignore header clicks — all other columns remain sortable.
Custom comparator
A column-level comparator takes priority over the plugin's global compare option. Here the "Item Name" column sorts by string length instead of alphabetically, while every other column falls back to the built-in type-aware comparator.
Server-side sorting
In server mode the plugin skips local row reordering and instead calls onChange with the updated sort model, leaving data fetching and ordering to the host. The sort model drives a simulated server request (here re-sorting a generated dataset) whose result is fed back into the data prop.
Sort events
The sorting plugin exposes an
onChange callback that fires with the current sort model whenever the header sort state changes. Click any column header to sort — each line below is a single event, listing the column id and direction of every active sort in priority order.No sort events yet — click a column header.