#433
Groups
A DataTable of tasks grouped into collapsible sprints, with a resizable Task column, drag-to-reorder rows between groups and a button inside a cell.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Groups" pattern (@codeatlasdev/ui demo #433, display/data-table) in my app.
Call get_demo({ ids: ["#433"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + @tanstack/svelte-table.
Use: Backlogs, boards in table form and any grouped list where rows are reordered or moved and cells hold controls.
Keep these library parts, with the props and tokens the demo uses:
- Button from "@codeatlasdev/ui"
- DataTable, DataTableColumnHeader, createCaColumnHelper, DataTableReorderEvent from "@codeatlasdev/ui/table"
Behaviour to keep:
- `groupBy={(t) => t.sprint}` renders one tbody per sprint with a header button that collapses its rows
- `meta: { label: 'Task', resizable: true }` with `size: 320`, `minSize: 160` and `maxSize: 560` adds a keyboard and pointer resize handle
- `{onReorder}` adds a grip per row; `rowId={(t) => t.id}` gives rows stable ids; the handler applies `e.to.group` and `e.to.index` to `tasks`
- `renderComponent(Button, {` puts a Button in a cell; clicking it does not fire `onRowClick`
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
How it is built
- `groupBy={(t) => t.sprint}` renders one tbody per sprint with a header button that collapses its rows
- `meta: { label: 'Task', resizable: true }` with `size: 320`, `minSize: 160` and `maxSize: 560` adds a keyboard and pointer resize handle
- `{onReorder}` adds a grip per row; `rowId={(t) => t.id}` gives rows stable ids; the handler applies `e.to.group` and `e.to.index` to `tasks`
- `renderComponent(Button, {` puts a Button in a cell; clicking it does not fire `onRowClick`
Related
Loading source.