ComponentsData Display
Table
Display tabular data with semantic rows and columns.
Overview
A table displays tabular data using semantic markup. Compose it from
TableHeader, TableBody, TableRow, TableHead, TableCell, and an optional
TableCaption.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
$ npx morpha-ui add tableExamples
With status cells
| Environment | Status |
|---|---|
| Production | Active |
| Staging | Idle |
| Legacy | Failed |
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add table. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add tableAPI Reference
The Table root forwards <table> attributes. The sub-components —
TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell,
and TableCaption — wrap their corresponding HTML table elements.
Prop
Type
Accessibility
- Describe the table's purpose with a
TableCaption. - Use
TableHeadfor column headers so screen readers associate cells with headers. - Keep the markup semantic (
thead/tbody/tr/th/td) rather than styling generic elements.