Table
A composable, styled table primitive for arbitrary tabular data.
The lightweight table primitive — a bordered, rounded, scrollable surface with a muted header and hairline row separators. Compose it by hand from TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption. For sorting / filtering / selection / inline-edit out of the box, use DataTable, which is built on these primitives. (The heavyweight, Attio-specific grid is RecordsTable.)
Preview
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $1,200.00 |
| INV-003 | Overdue | $80.00 |
Usage
import {
Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
} from "crisp";
<Table interactive>
<TableHeader>
<TableRow>
<TableHead>Invoice</TableHead>
<TableHead align="right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>INV-001</TableCell>
<TableCell align="right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>API
Table extends <table> and adds interactive?: boolean (row hover). TableHead / TableCell extend <th> / <td> and add align?: "left" | "right" | "center". The rest (TableHeader, TableBody, TableFooter, TableRow, TableCaption) are thin styled wrappers over their semantic elements.