Grouped table
An issue table grouped by status with sticky, collapsible group headers, ID-first rows with label chips, priority glyphs, due-date urgency and avatar stacks, inline add rows and keyboard row navigation.
Preview
| ID | Title | Priority | Due | Owner |
|---|---|---|---|---|
In progress3 | ||||
| LNT-219 | Seat-based pricing toggleBilling | High | ||
| LNT-224 | Keyboard map for the editorA11y | Medium | ||
| LNT-226 | Retry webhook deliveries with backoffPlatform | Urgent | ||
In review2 | ||||
| LNT-212 | Stream CSV imports in chunksPerf | Medium | ||
| LNT-229 | Dark mode for the status page | Low | — | |
To do3 | ||||
| LNT-231 | Export invoices as CSVBilling | Medium | ||
| LNT-238 | Empty state for searchDesign | Low | — | |
| LNT-240 | Audit log retention settingSecurity | High | ||
Done2· shipped | ||||
Arrow keys move between rows. Left on a row goes to its group; Left and Right collapse and expand groups.
Arrow keys move between rows; Left and Right fold groups.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { id, label, kind }[] | — | Status groups in order; kind is backlog, todo, progress, review, done or canceled. |
| issues | GroupedIssue[] | — | { id, title, status, labels?, assignees?, priority? (0–4), due? (yyyy-mm-dd) }. |
| now | Date | — | Reference date for overdue and due-soon colours. |
| defaultCollapsed | string[] | [] | Group ids folded at start. |
| onAdd | (groupId, title) => GroupedIssue | void | — | Shows an inline “Add issue” row per group. |
| onOpen | (issue) => void | — | Click, Enter or Space on a row. |
| label | string | "Issues" | Accessible name of the table. |
| maxHeight | number | 420 | Scroll area height; group headers stick inside it. |
| locale | string | "en-US" | Locale for due dates. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.