Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProOne control for sorting: choose the field and the direction together, with direction words that fit the kind of field (A to Z, Low to high, Oldest first), a summary on the button and Reset to the default. Use this when a list has several sort fields.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it above lists and galleries where people sort by name, date or size and a column header is not available, as in cards and mobile layouts.
Do not use it when sorting happens only from table column headers. Use sortable headers.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| --------------- | ------------------------------- | ---------------- | --------------------- | ----------------------- | ------------------------------- |
| fields | { key, label, kind: "text" \\ | "number" \\ | "date" }[] | - | What the list can be sorted by. |
| value | { field: string; dir: "asc" \\ | "desc" } | - | The order (controlled). |
| defaultValue | { field, dir } | first field, asc | Initial order. |
| onValueChange | (order) => void | - | Runs on every change. |
| defaultOrder | { field, dir } | defaultValue | What Reset restores. |
radiogroup of fields and a ToggleGroup of directions whose labels depend on the field kind (A to Z/Z to A, Low to high/High to low, Oldest first/Newest first).Sort by <field>, <direction>.The pattern ships with a Testing Library test (sort-order-select-field-direction.test.tsx) that covers direction words by kind, the button name, announcing and reset.