Element: #433 Groups (display/data-table)
What it shows: 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.
When to use: Backlogs, boards in table form and any grouped list where rows are reordered or moved and cells hold controls.
Spec:
- `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`
Names: Grouped table | Resizable columns | Reorderable rows | Tabela agrupada | Tabla agrupada
Tags: data-table, groups, resize, reorder, drag, interactive-cells
Needs: @codeatlasdev/ui@4.4.0 + @tanstack/svelte-table
Components: Button, DataTable, DataTableColumnHeader
Live demo: https://ui.codeatlas.com.br/docs/display/data-table#groups
t.id}
groupBy={(t) => t.sprint}
{onReorder}
onRowClick={(t) => (last = `Selected ${t.title}`)}
/>
{last}