#139
Default (scroll)
A default SimpleTable listing three users with name, email, role and status in a flush card.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default (scroll)" pattern (@codeatlasdev/ui demo #139, display/table) in my app.
Call get_demo({ ids: ["#139"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Compact read-only tables that keep their columns and scroll horizontally when space runs out.
Keep these library parts, with the props and tokens the demo uses:
- SimpleTable, Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card flush full>` wraps the table
- `<SimpleTable>` with no props, plain `thead` and `tbody`
- Header columns: Name, Email, Role, Status
- 3 rows from `rows` with `name`, `email`, `role`, `status`
- The first cell uses `class="primary"`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- SimpleTable
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<Card flush full>` wraps the table
- `<SimpleTable>` with no props, plain `thead` and `tbody`
- Header columns: Name, Email, Role, Status
- 3 rows from `rows` with `name`, `email`, `role`, `status`
- The first cell uses `class="primary"`
Related
Loading source.