TableCard
Markdown for agentsTable shell with title/description, actions, optional toolbar, edge-to-edge body and a footer row.
npx slipstream-ui@latest add table-cardList page table
Upcoming classes
3 scheduled this week
Filtered by: this week
| Class | Instructor | Seats |
|---|---|---|
| Vinyasa Flow | Ada | 12 |
| Beginner Ballet | Grace | 8 |
| Pointe Technique | Martha | 6 |
Showing 1–3 of 3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Card heading (h2). |
| description | string | — | Supporting line under the heading. |
| actions | ReactNode | — | Right-aligned header actions. |
| toolbar | ReactNode | — | Row between header and table (filters, bulk actions). |
| children | ReactNode | required | Table or DataTable content. |
| footer | ReactNode | — | Footer row (pagination, summary). |
| flush | boolean | true | Remove inner padding so the table reaches the card edges. |
Accessibility
- Title renders an h2; the page h1 belongs to PageHeader.
- The table keeps its own caption/aria-label.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.