Table
Presentational data table family with hover rows and caption support.
Preview
| Invoice | Date | Description | Amount | Status |
|---|---|---|---|---|
| INV-2025-001 | 1 May 2025 | Starter plan | £9.00 | Paid |
| INV-2025-002 | 1 Jun 2025 | Pro plan | £29.00 | Paid |
| INV-2025-003 | 1 Jul 2025 | Pro plan | £29.00 | Due |
| Total | £67.00 | |||
Installation
bash
npx shadcn@latest add @layout/tableUsage
tsx
import {
Table,
TableHeader,
TableBody,
TableFooter,
TableRow,
TableHead,
TableCell,
TableCaption,
} from "@/components/ui/table"Examples
Team members table
| Name | Role | Joined | |
|---|---|---|---|
| Alice Chen | alice@example.com | Owner | Jan 2025 |
| Ben Wright | ben@example.com | Admin | Feb 2025 |
| Cara Osei | cara@example.com | Member | Mar 2025 |
Guidelines for AI agents
Static tabular data. TableHead cells are muted-foreground; numeric columns align right via className. For sorting/filtering/virtualisation compose with TanStack Table.
Never
- Neveruse tables for page layout
- Neverput interactive rows without hover and focus states
Tokens consumed
--layout-border--layout-muted--layout-muted-fg