Table
Semantic data tables with consistent headers, rows, cells, captions, and totals.
Examples
Invoices
| Invoice | Status | Total |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $150.00 |
Overview
Use semantic table parts to present comparable values in rows and columns. The root provides a responsive overflow container.
tsx
import { Table, TableBody, TableCell, TableRow } from "@standard-ui/react" <Table> <TableBody> <TableRow><TableCell>INV-001</TableCell></TableRow> </TableBody> </Table>
API
| Part | Element |
|---|---|
| Table | table |
| TableHead | th |
| TableCell | td |
Guidelines
Do
- Use clear, concise column headings
- Align numeric data consistently
Don't
- Don't use a table for unrelated content