Components
Table
Styled semantic table primitives.
The Table primitives are thin, styled wrappers over the native table elements
(<table>, <thead>, <tbody>, <tr>, <th>, <td>, <caption>). The root
Table also wraps itself in a horizontally scrollable container so wide tables
never overflow their column. Compose them like ordinary HTML tables.
Preview
| Invoice | Plan | Status | Amount |
|---|---|---|---|
| INV-001 | Pro | Paid | $29.00 |
| INV-002 | Pro | Paid | $29.00 |
| INV-003 | Team | Pending | $99.00 |
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,} from '@web/components/ui/table';const invoices = [ { id: 'INV-001', plan: 'Pro', status: 'Paid', amount: '$29.00' }, { id: 'INV-002', plan: 'Pro', status: 'Paid', amount: '$29.00' }, { id: 'INV-003', plan: 'Team', status: 'Pending', amount: '$99.00' },];export default function TableDemo() { return ( <Table className="max-w-lg"> <TableCaption>Recent invoices.</TableCaption> <TableHeader> <TableRow> <TableHead>Invoice</TableHead> <TableHead>Plan</TableHead> <TableHead>Status</TableHead> <TableHead className="text-right">Amount</TableHead> </TableRow> </TableHeader> <TableBody> {invoices.map((invoice) => ( <TableRow key={invoice.id}> <TableCell className="font-medium">{invoice.id}</TableCell> <TableCell>{invoice.plan}</TableCell> <TableCell>{invoice.status}</TableCell> <TableCell className="text-right">{invoice.amount}</TableCell> </TableRow> ))} </TableBody> </Table> );}Import
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";Props
Each part accepts all native attributes of the element it renders (TableHead →
<th>, TableCell → <td>, and so on) plus className — there are no custom
props. Mark a selected row with data-state="selected" for the row highlight.