Data displayGenerated from the public API

SortableAnnouncer

Reorder with pointer or keyboard, announcing every move.

@luc/ui

Examples

Default

The list is controlled: it reports the complete new order and the caller owns it.

IntroductionFour slides
The datasetSix slides
MethodFive slides
ResultsNine slides
Next stepsTwo slides

const [order, setOrder] = useState(items.map((item) => item.id));

<SortableList
  label="Talk outline"
  items={order.map((id) => items.find((item) => item.id === id)!)}
  onReorder={setOrder}
/>

Usage

import { SortableAnnouncer } from "@luc/ui";

const [order, setOrder] = useState(items.map((item) => item.id));

<SortableList
  label="Talk outline"
  items={order.map((id) => items.find((item) => item.id === id)!)}
  onReorder={setOrder}
/>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`SortableAnnouncer`	1 documented props	`({ message }: { message: string; }) => import("@types/react").JSX.Element`
`SortableList`	4 documented props	`({ items, onReorder, label, disabled, className, ...props }: SortableListProps) => import("@types/react").JSX.Element`

SortableAnnouncer props

Type: { message: string; }

Values the compiler reads from the declaration.

SortableAnnouncer props
Prop	Type	Default	Notes
`message`	`string`	`—`

SortableList props

Type: SortableListProps

Values the compiler reads from the declaration.

SortableList props
Prop	Type	Default	Notes
`disabled?`	`boolean \| undefined`	`—`
`items`	`readonly SortableItem[]`	`—`
`label?`	`string \| undefined`	`—`
`onReorder`	`(ids: string[]) => void`	`—`	The complete id order after the move — never a delta.

Guidelines

Keep the order in the caller: `onReorder` reports the complete new order, which is what a server needs to persist.
Write a `message` that says what moving the row did; it is announced, and “Moved” alone does not.

Don't

Use drag-and-drop as the only way to reorder; the keyboard path is part of the component and hiding it makes the list inaccessible.

Accessibility

Each row is a focusable item with a keyboard move, and `SortableAnnouncer` reports the new position. `disabled` keeps the list readable while removing the reorder controls.

Family

Data display

Dense, sortable, scannable: the surfaces a real product reads numbers from.

17 documented entries in this family. Open the family index