Display
Table
Styling and scroll behaviour for a table you write in native markup.
Table
import { Table } from '@anomalia/ui'; Notes
- Deliberately not a DataTable with column definitions. Column configs are a second, worse templating language: the moment a cell needs two lines, a badge and a link, you are writing render functions inside an array.
- The wrapper is a focusable labelled region. A scroll container a keyboard user cannot focus is a column they can never reach (SC 2.1.1) — this is the WAI scrollable-region technique, not an accessibility violation.
- Put
data-numericon a cell to right-align it and switch on tabular figures;data-interactiveanddata-selectedon a<tr>for row states. - A sticky head needs an opaque background or the rows scroll through it. That is handled;
stickyHeadis all you pass.
Examples
Rows
Native table markup, wrapped. `data-numeric` right-aligns a cell and switches on tabular figures; `data-interactive` makes a row hoverable. The wrapper is a focusable labelled region so a keyboard user can reach a column that is off-screen.
| Day | Channel | Format | Reach | Rate | Status |
|---|---|---|---|---|---|
Mon | Carousel | 42,180 | 5.1% | Scheduled | |
Wed | Article | 8,940 | 3.8% | Needs copy | |
Fri | Reel | 96,402 | 7.4% | Rendering | |
Sat | TikTok | Reel | 12,060 | 2.2% | Draft |
API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Names the scroll region for keyboard and screen-reader users. |
stickyHead | boolean | false | Pins `<thead>` while the body scrolls. |
density | 'comfortable' | 'compact' | 'comfortable' | Row padding. |
rules | boolean | true | Hairlines between rows. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.