Data Table
The list every Waimakers app ends up needing: sort, filter, expand and select rows, with stacked rows on a phone and named states for loading, empty, refused and failed.
bunx --bun shadcn@4.17.0 add @waimakers/data-table- npm dependencies
- @tanstack/react-table@8.21.3lucide-react@1.33.0
From the registry
TanStack Table with manual sort, expansion and selection, responsive column priority and optional stacked rows. Desktop row activation uses one keyboard stop, with exact timestamps available on row focus or time hover.
Examples
Agents list
A full agents list. Search, filter by status, sort by name or last run, hide columns, expand a row for its purpose and recent runs, select a row, and load more. Narrow the window to see stacked rows.
| Expand | Status | Owner | Skills | ||
|---|---|---|---|---|---|
| Proposal drafter | Running | Paul | 4 | 2026-10-20 09:05:00 UTC | |
| Meeting notes | Live | Anna | 6 | 2026-10-20 08:42:00 UTC | |
| Hiring scout | Live | Anna | 5 | 2026-10-20 07:55:00 UTC | |
| Invoice checker | Live | Tamar | 3 | 2026-10-20 06:00:00 UTC |
Select a row to act on it.
Grouped rows
Group rows under a heading by any key; here, agents by the team that owns them.
| Agent | Owner | Status |
|---|---|---|
| Delivery | ||
| Meeting notes | Anna | Live |
| Engineering | ||
| Release notes | Joost | Paused |
| Operations | ||
| Inbox triage | Tamar | Failing |
| Invoice checker | Tamar | Live |
| People | ||
| Hiring scout | Anna | Live |
| Sales | ||
| Proposal drafter | Paul | Running |
Inspect action
With rowActionPlacement="end", each row ends in an Inspect button and the name stays plain text. Use it when a row opens a sheet rather than a page.
| Agent | Owner | Status | Inspect |
|---|---|---|---|
| Meeting notes | Anna | Live | |
| Proposal drafter | Paul | Running | |
| Inbox triage | Tamar | Failing | |
| Release notes | Joost | Paused |
Nothing inspected yet.
Loading
While the first page loads, a skeleton holds the table's shape.
Empty
A list with nothing in it yet says what will appear and offers the first step.
No agents yet
An agent runs skills for you on a schedule or when someone asks. Start with one small job.
No results
When filters hide every row, the table says so and offers to clear them.
No results for these filters
Load failed
A failed load names what failed, offers Try again and shows a reference to quote. Try again shows the loading state, then the rows.
The agents did not load
The OS did not answer in time. Your agents are fine; only this list failed.
Refused
When the viewer lacks the grant, the table names the grant and who can give it.
You cannot see the audit log
This needs the audit_read grant. Ask Tamar for access.