Display
Table
Semantic tables with mono numerals, zebra rows and a sticky header.
Tables present structured data. Cuelark tables are plain semantic HTML (fully crawlable), with hairline rows, mono tabular numerals that line up, optional zebra striping and a sticky header.
Preview
| Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-0042 | Atlas Labs | Paid | $1,290.00 |
| INV-0043 | Borealis | Pending | $480.00 |
| INV-0044 | Cinder & Co | Paid | $2,350.00 |
| INV-0045 | Driftwood | Overdue | $99.00 |
| Total | $4,219.00 | ||
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/table.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/table.
Usage
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
<Table striped>
<TableHeader><TableRow><TableHead>Name</TableHead><TableHead numeric>Amount</TableHead></TableRow></TableHeader>
<TableBody>…</TableBody>
</Table>API reference
Table
| Prop | Type | Default | Description |
|---|---|---|---|
| striped | boolean | — | Zebra rows. |
| stickyHeader | boolean | — | Sticky thead. |
TableHead · TableCell
| Prop | Type | Default | Description |
|---|---|---|---|
| numeric | boolean | — | Right-aligned tabular figures. |
TableHeader · TableBody · TableFooter · TableRow · TableCaption
Accessibility
- Real <table> semantics with <th> headers and a <caption>.
- The container scrolls horizontally on small screens.
FAQ
Also searched as: react table · shadcn table · data table · html table component · tailwind table