Table
Responsive data tables with density, striping, and variant options. Use slots to compose rich cells with avatars, badges, and inline actions.
Elevated Directory
An elevated table with relaxed spacing—ideal for team directories and account overviews.
Variant: elevated
| Member | Location | Status | |
|---|---|---|---|
|
Lena Moore
Product Manager
|
Berlin, DE |
|
lena@pyraui.dev |
|
Marcus Reed
Design Lead
|
Austin, US |
|
marcus@pyraui.dev |
|
Aiko Fujita
Senior Engineer
|
Tokyo, JP |
|
aiko@pyraui.dev |
|
Gabriel Khan
Data Scientist
|
Singapore |
|
gabriel@pyraui.dev |
Outlined + Striped
Outlined variant with compact density and zebra striping—great for operational metrics.
Variant: outlined · Striping on
| Service | SLA | Incidents | Trend |
|---|---|---|---|
| Realtime | 99.95% | 1 | +0.3% |
| Auth | 99.99% | 0 | +0.1% |
| Billing | 99.70% | 3 | -0.4% |
| Storage | 99.80% | 2 | -0.2% |
Minimal with Rich Cells
Compose cells with avatars, badges, and CTA buttons while keeping the layout minimal.
Variant: minimal · Density: normal
| Customer | MRR | Renewal | Health |
|---|---|---|---|
|
ZA
Zeno Analytics
Enterprise plan
|
$12,400 | Apr 18 |
|
|
NL
Northwind Labs
Growth plan
|
$4,120 | May 3 |
|
|
AR
Arcade
Startup plan
|
$1,640 | Jun 12 |
|
<.table rows={@rows} variant={:outlined} density={:compact} striped>
<:col label="Service" field={:service} />
<:col label="Trend" align={:right} :let={row}>
<span class={trend_class(row.trend)}>{row.trend}</span>
</:col>
</.table>