Table
A responsive table component with a caption, header, body, and footer, plus an optional card row variant.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui and cossui.
- Replaced text-left with text-start, and pr-0 with pe-0 on the checkbox column, for RTL
- Added an optional card variant (Table variant="card") that separates each row into its own bordered, elevated surface — inspired by cossui's Table
Overview
Installation
Usage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
export function Example() {
return (
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Invoice</TableHead>
<TableHead className="text-end">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>INV001</TableCell>
<TableCell className="text-end">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>
)
}Examples
Card Variant
Set variant="card" for a card-style table: separated borders, rounded corners, and row surfaces that read as individual cards. The default variant is a simpler grid with shared borders.
Actions
A table showing per-row actions using a Dropdown Menu.
Selection
Combine the card variant with Checkbox row selection, Avatar, a status Badge, and a Dropdown Menu for row actions — a common shape for team or user management tables.
RTL
Header and cell alignment use logical text-start / text-end utilities, so numeric columns stay aligned to the trailing edge in both directions.