Table
Display structured records in rows and columns.
Preview
| Invoice | Status | Amount |
|---|---|---|
| INV-1042 | Paid | $240.00 |
| INV-1043 | Paid | $120.00 |
| INV-1044 | Due Nov 15 | $360.00 |
| Total | $720.00 | |
Installation
pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/table.jsonUses your existing theme and cn utility.
Usage
Use the default density for 44px rows. Set density="compact" for 32px rows in dense views. Both sizes can grow to fit wrapped content. Align numeric values to the end of the column and use consistent formats.
Composition
Table
├── TableCaption (optional)
├── TableHeader
│ └── TableRow → TableHead
├── TableBody
│ └── TableRow → TableHead or TableCell
└── TableFooter (optional)
└── TableRow → TableHead or TableCellUse a body with rows and cells for the records. Put column headings in the header and use a row header where a cell identifies its row. Place an optional caption first in the markup and use the footer for summaries.
Accessibility
Use scope="col" and scope="row" to associate headings with cells. Give the scroll region a useful name with scrollLabel. Tab to the scroll region and use the arrow keys to scroll wide tables. Links and buttons inside cells keep their native keyboard behavior.
API
| Part | Props |
|---|---|
Table | Native table props, plus density (default or compact) and scrollLabel (defaults to Table) |
| Header, Body, Footer, Row, Head, Cell, Caption | Native props for the corresponding table element |
The native table composition follows shadcn Table. Migoy adds row density and a labeled keyboard-scrollable region.