An accounts table whose rows glide to their new places when a column is sorted. Each row opens in place to a detail panel with a usage sparkline, owner, renewal and risk notes.
npx shadcn@latest add https://hyperblur.dev/r/list-sortable-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-sortable-expand.tsx.
import { ListSortableExpand } from "@/components/hyperblur/list-sortable-expand"
<ListSortableExpand defaultSort={{ key: "health", dir: "asc" }} multiple />| Prop | Type | Default | Description |
|---|---|---|---|
| rows | AccountRow[] | 6 sample accounts | Rows with id, name, domain, plan, seats, arr, health (0 to 100), owner, renewal, 12 weeks of usage and an optional note. |
| accent | string | "#2f7bff" | Accent for the sort indicator, open row edge and sparkline. |
| defaultSort | { key: "name" | "plan" | "seats" | "arr" | "health"; dir: "asc" | "desc" } | { key: "arr", dir: "desc" } | Initial sort. |
| onSortChange | (sort) => void | Called when a column header changes the sort. | |
| multiple | boolean | false | Allows several rows to be open at once. |
| defaultExpanded | string[] | [] | Row ids open on first render. |
| onExpandChange | (ids: string[]) => void | Called with the open row ids. | |
| currency | string | "$" | Currency symbol for ARR and seat price. |
| compact | boolean | false | Uses 40px rows instead of 46px. |