Component
SortMandate
It gives a list three incompatible rules: first letter, vowel load or last letter. Selecting a mandate actually reorders the rendered items and keeps that decision visible until it is withdrawn.
Possible use
It could make a reviewer decide whether a handoff roster deserves an opening-letter order, a vowel-heavy order or a last-letter order, or let a presenter rearrange agenda labels according to whichever criterion feels official that day.
Reasonable alternative
A reasonable local alternative is one explicit sort chosen near the data. A reusable tribunal for three arbitrary ordering rules makes list intent harder to understand.
01 / Preview
Try it yourself.
Roster under review
- 01Status
- 02Owner
- 03Review
- 04Date
Mechanism
- 1
- Start with the roster in the supplied order.
- 2
- Choose First letter, Most vowels or Last letter.
- 3
- The same four labels move into a genuinely different order under each mandate.
- 4
- Withdraw the mandate when no criterion deserves to govern the list.
02 / Usage
Put it somewhere.
example.tsxTSX
import { SortMandate } from "gra-ui";
import "gra-ui/styles.css";
export function MandatedRoster() {
return <SortMandate items={["Status", "Owner", "Review", "Date"]} />;
}03 / API
Small surface area.
PropTypeDescription
itemsreadonly string[]The strings submitted to the three competing ordering rules.