Table

Composition preview

Try Table alongside its related data & surfaces components. These examples keep all actions local.

Usage

import { Table, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";

<>
<Table>
  <TableCaption>Recent drafts</TableCaption>
  <TableHeader><TableRow><TableHead>Title</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>Launch update</TableCell><TableCell>Draft</TableCell></TableRow></TableBody>
</Table>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption

Usage & accessibility

Keep header semantics and readable type. The unstyled variant retains existing scroll containers, column widths and row behavior.

Implementation contract

src/components/ui/table.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.