Filterable table

Canonical specification

Purpose

A list screen that proves the navigation, display and feedback components compose around one data-table: find, filter, select, page. It exists to show the states of a whole list screen, including nothing matching and still loading, not to prescribe a product.

Anatomy

The region landmark; the toolbar on color.surface.chrome with the search-field, the Filter menu button, the Columns toggle, a separator and the primary New button; a row of removable chips (priority: R1, maturity: stable); the scroller around the data-table, whose Name header carries aria-sort, whose rows carry aria-selected and a checkbox, and whose last column is a status badge (✓ Tested on color.status.success.fill, i Demonstrated on color.status.info.fill); the count in color.text.muted and the compact pagination. The empty variant adds the empty-state block; the loading variant marks the table aria-busy. Every part is the component’s own markup and classes.

States

The composed components keep their own pressed, sorted, disabled, loading and open treatments; this specimen declares only the states the whole screen adds to them.

Keyboard

Landmarks first: the region, the toolbar’s search landmark and the pagination navigation are offered by name. The toolbar is one stop with arrow movement between the search field, Filter, Columns and New (the toolbar contract); Escape clears the search. Each chip’s Remove button is its own stop. The table follows the data-table contract: the first row is the stop, arrows move between rows, Space on a row’s checkbox toggles it, Enter on a header sorts. Next is the last stop; a disabled Prev is not focusable.

Accessibility

The search field’s visible label is replaced by a visually hidden one so the toolbar stays one row; its status line is visually hidden too and announces “No components match” through role="status". The count is a second status region and changes once per filter. Rows are named by their Name cell through aria-labelledby on the row checkbox; the select-all is a checkbox-role button whose mixed state carries the – glyph. Badges carry their glyphs so status survives without colour. Contrast: toolbar text 8.60:1 on the chrome surface, boundaries 4.42:1, headers 10.10:1, badges 7.08:1 and 7.13:1 on their fills, the ring 7.48:1 on the selection fill.

Portability

Native table semantics, a toolbar, a menu button and a status region; the roving tabindex and the menu need the host’s script, every state renders without one from the root hooks data-state-selected and data-state-no-results and the table’s own aria-busy. Hosts without container queries wrap the toolbar at the 600px viewport breakpoint. The 56rem width and the 44rem table minimum are layout of this specimen and not rules; the specimen proves composition, not a product.

Non-examples

A rounded search pill with a magnifier inside a shadowed toolbar. Filter chips drawn as pills with a coloured fill per category. Zebra-striped rows. A selected row shown by a coloured left bar and no fill. A blue Material checkbox. A skeleton shimmer while loading. An infinite scroll with no count and no pages.