Table
A responsive table component.
Loading example…
Installation
bunx --bun shadcn@latest add @sui/tableInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@workspace/ui/components/table"<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>Composition
Use the following composition to build a Table:
Table
├── TableCaption
├── TableHeader
│ └── TableRow
│ ├── TableHead
│ ├── TableHead
│ ├── TableHead
│ └── TableHead
├── TableBody
│ ├── TableRow
│ │ ├── TableCell
│ │ ├── TableCell
│ │ ├── TableCell
│ │ └── TableCell
│ └── TableRow
│ ├── TableCell
│ ├── TableCell
│ ├── TableCell
│ └── TableCell
└── TableFooterFooter
Use the <TableFooter /> component to add a footer to the table.
Loading example…
Actions
A table showing actions for each row using a <DropdownMenu /> component.
Loading example…
Data Table
Use the shared Data Table block for search, filters, sorting, pagination, selection, bulk actions, and drag ordering. Import it from @workspace/ui/blocks/data-table.
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Loading example…