A component for displaying tabular data with header, body, and optional footer sections.
npx micomponents-cli add table| Name | Role | |
|---|---|---|
| John | john@example.com | Admin |
| Jane | jane@example.com | User |
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>John</TableCell>
<TableCell>john@example.com</TableCell>
<TableCell>Admin</TableCell>
</TableRow>
</TableBody>
</Table>| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $150.00 |
| INV-003 | Pending | $350.00 |
| Prop | Type | Default | Description |
|---|---|---|---|
| Table | React.HTMLAttributes<HTMLTableElement> | - | Main table container |
| TableHeader | React.HTMLAttributes<HTMLTableSectionElement> | - | Table header section |
| TableBody | React.HTMLAttributes<HTMLTableSectionElement> | - | Table body section |
| TableRow | React.HTMLAttributes<HTMLTableRowElement> | - | Table row element |
| TableHead | React.ThHTMLAttributes<HTMLTableCellElement> | - | Table header cell |
| TableCell | React.TdHTMLAttributes<HTMLTableCellElement> | - | Table data cell |