Table
Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
Kit parts
List
Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.
Seats open in 11 days. Want one email that morning?
Anatomy
Plain CSS grid rows with inset hairlines; a delegated module adds the two behaviours, so lists added later work without a call. Moving a row by keyboard moves its neighbour instead, so the focused grip never leaves the DOM and never loses the focus. The numbers are a CSS counter, so they follow the order with no script.
Variants
- People · a key at the end
- Status · lamps with words
- Links · the whole row goes
States
- Rest
- Hover
- Focus
- Chosen · lifted
Props and options
| Name | Kind | Description |
|---|---|---|
| aria-selected | attribute | Chosen: the row sinks into a recess and its check key latches. |
| change | event | The choice changed. |
| Up · Down · Home · End | keyboard | Move the active row. |
| Space · Enter · Ctrl+A | keyboard | Choose (toggle when multiple) · choose all. |
| Space · arrows · Escape | keyboard | Lift · move · put back. Space again drops. |
Usage notes
Choose takes with a click, or Tab in and use the arrows and Space. In the running order, press Space on a grip, move with the arrows, Space to drop, or drag the grip.
Accessibility
- A plain list is a list: rows are read with their title, second line and fact, in order.
- Selectable lists follow the listbox pattern. The check key and the recess show it twice over.
- Reordering follows the grab-and-move model.
- Dragging is a second way to reorder, never the only one.
Related parts
Avatar
A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
File tree
Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.