#183
AppList
A searchable, filterable users list with a New user action, a role filter and a table with user cell and status chip.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "AppList" pattern (@codeatlasdev/ui demo #183, layout/list-page) in my app.
Call get_demo({ ids: ["#183"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Admin list pages where the user searches, filters by one field and acts on rows.
Keep these library parts, with the props and tokens the demo uses:
- AppList, Button, FilterGroup, SimpleTable, StatusChip, UserCell from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppList title="Users" data={ALL} searchKeys={['name', 'email']} perPage={4}>`
- `const ALL` has 4 rows with fields `id`, `name`, `email`, `role`, `status`
- `{#snippet actions()}` holds `<Button variant="filled" size="sm">` with `<Plus size={14} />` and the label New user
- `{#snippet filters(list)}` renders `<FilterGroup options={roleOpts} value={list.filters['role'] ?? 'all'} onchange={(v) => list.setFilter('role', v)} />`
- `{#snippet children(list)}` renders a `SimpleTable` over `{#each list.rows as u (u.id)}` with `<UserCell name={u.name} email={u.email} />` and `<StatusChip`
- Frame size is `height: 420px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- AppList
@codeatlasdev/ui - Button
@codeatlasdev/ui - FilterGroup
@codeatlasdev/ui - SimpleTable
@codeatlasdev/ui - StatusChip
@codeatlasdev/ui - UserCell
@codeatlasdev/ui
How it is built
- `<AppList title="Users" data={ALL} searchKeys={['name', 'email']} perPage={4}>`
- `const ALL` has 4 rows with fields `id`, `name`, `email`, `role`, `status`
- `{#snippet actions()}` holds `<Button variant="filled" size="sm">` with `<Plus size={14} />` and the label New user
- `{#snippet filters(list)}` renders `<FilterGroup options={roleOpts} value={list.filters['role'] ?? 'all'} onchange={(v) => list.setFilter('role', v)} />`
- `{#snippet children(list)}` renders a `SimpleTable` over `{#each list.rows as u (u.id)}` with `<UserCell name={u.name} email={u.email} />` and `<StatusChip`
- Frame size is `height: 420px`
Related
Loading source.