Sort order
A React component in Beamline's Data & tables category.
Several sort keys in order. Each key says its rank in words ("Sort by Plan, A to Z", "then by Size, largest first") with its order named for the field's kind (A to Z, largest first, newest first), the rank drawn in the key's hue as a table header shows it; keys moved up or down, changed or removed, and added from the fields not yet used. Empty values follow one stated rule (always last or always first) rather than a silent guess; a key whose field no longer exists is kept and flagged, skipped until it's removed. sortRows applies the same order to rows.
Use it for
- Sorting a table or list by more than one field, in a view's settings or a toolbar popover.
- Anywhere the order of sort keys and where empty values go must be stated, not guessed.
Not for
- One column's sort from its header (data-table, data-grid).
- Picking which rows show (query-builder, filter-toolbar).
Anatomy
- keys: each with its rank, its sentence, the field and the order, Move up, Move down and Remove; a key whose field is gone with why
- foot: Add a sort, Empty values (always last, always first)
- the empties rule in words
States
- no keys: not sorted, said
- one key; several keys (first, then …)
- a field that's gone: kept, struck, said, skipped by sortRows
- every field used: Add a sort hidden
- empties last or first
- right to left: the layout mirrors
- reduced motion: nothing moves
Keyboard
- Tab through each key's field, order (arrows within), Move up, Move down and Remove, then Add a sort and Empty values
Motion
Nothing moves. Nothing runs at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
fields (required) | SortField[] | — | |
value (required) | SortValue | — | Controlled selected value; omit to use defaultValue. |
onChange (required) | (value: SortValue) => void | — | |
labels | Partial<{ label: Message; first: Message; then: Message; rank: Message; field: Message;… | — | |
className | string | — | Classes on the documented visual root; no override by default. |
style | CSSProperties | — | Inline styles on the documented visual root; no overrides by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
Dependencies
lucide-react
Import
import { SortOrder } from "@beamline/sort-order";Get it
Sort order is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Data & tables
- Living table: A table that shows as much as fits on both axes: width decides which columns show (the rest ride in the name line, moving there rather than vanishing)…
- Availability layers: A week of bookable start times whose closed times explain themselves: every availability rule (hours, time off, bookings, buffers, rooms, lead time…
- Capacity terrain: A schedule that stands on a terrain of capacity: under each station's lane of jobs, every day's load rises to its capacity line and an overload is a…
- Domino move: A room board where one move shows its chain: drag a booking (or pick it and aim it with the keys) onto a taken room and the bookings it would push appear…
- Match board: Month-end matching as one picture: bank lines and books entries side by side with threads between them — solid for matched, dashed with the host's reason…
- Split anything: One splitter for money, quantities and time: a bar of the whole shows every target's part and what is not split yet; items are dragged onto targets…
- Approval route: A policy you can read by trying it: an amount on a log scale with the thresholds as marks (the arrows stop just under, at and just over each), the…
- Proposal twin: A proposal edited beside the client's exact page, the two linked both ways: a field in focus lights its twin on the page, scrolls it into view and joins…
- Quantity river: The life of one order line's quantity: at rest a bar of its real split ("5 delivered · 1 back in stock · 1 damaged · 5 cancelled"), unfolding into a…
- Stock horizon: Projected stock per item over the coming weeks: a strip of weeks with the safety line, weeks under safety in warn and short in danger, every dip said in…
- Ageing queue: Tickets that visibly age: each ticket's ring fills toward its own service target and steps from on time to late to very late, the words say when it is…
- Import lens: A messy import made fixable by kind: rows stream through the checks once with live counts; problems gather into groups that say what is wrong in words…
- Duplicate guard: A new record that watches for the one that already exists: as you type, the likely duplicates slide in beside the form with the fields that match lit and…
- Scan flow: A pick list that takes scans: each scan flies from the scan field into its row and fills that row's quantity ring, and the prompt moves to the next bin…
- Pack planner: The packing bench: the order's items sit in box outlines drawn to scale, each box filling to its padding line, weighing against its limit and naming the…
- Provenance lens: Hold Alt (or press Lens) over any number on the page and see what makes it: hairline threads draw from the number to the rows, cards and documents on…
- Record time machine: The record itself, rewound in place: a slim track of every change (a tick per change in its person's colour, hollow for automation, named moments as…
- Tension timeline: A plan where slack is something you see: every dependency is a string from one task's end to the next one's start, sagging with the days it has to spare…
- Replay bar: Rewind for anything live: pause a stream, scrub back to the moment you missed (markers for the ones that matter), step one update at a time, replay at a…
- Event calendar: A schedule of events by day, week or month: events that overlap sit side by side, drag one to another time or day or pull its bottom edge to change its…
- Kanban board: Work as cards in columns by stage: drag a card (or lift it with Space and walk it with the arrows) to another column or place, the cards around it make…
- Data grid: Virtualised local or server-driven grid: stable row IDs, manual sort and filters, pages or infinite loading, retry without losing rows, inline editing…
- Pivot table: Records summed up by the fields people choose: rows grouped by one or more fields that fold open level by level, columns split by another, one or more…
- Query builder: Conditions people build by hand to pick out records: each rule is a field, an operator that fits the field (contains, between, in the last N days, is any…
- Metric rules: Ordered rules that colour a dashboard number. Each rule has a name for what its colour means ("At risk", not just red) and a tone (good, watch, act…
- Log viewer: Log lines as they stream: it follows the newest line until you scroll up, then counts what arrived and brings you back in one click; filter by level with…
- JSON viewer: A JSON value as a tree you can read and walk: branches open and close (one level, or all at once), closed ones preview what they hold, every value reads…
- JSON diff viewer: Two versions of a JSON value compared as one tree: added keys marked +, removed ones struck through with −, changed values read old → new, unchanged keys…
- Import mapping: Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row…
- Diff table: Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply…
- Filter toolbar: The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls.
- Table: A native HTML table for small datasets, composed with children or driven by records; shared server paging, sorting, filters, search, stable-ID selection…