Table
Organizes structured records into clear rows and columns with column headers, hover highlights, and responsive layouts.
4.7 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-tableUsage
Code
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'Code
<Table>
<TableCaption>Caption</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Header</TableHead>
<TableHead>Header</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Cell</TableCell>
<TableCell>Cell</TableCell>
</TableRow>
</TableBody>
</Table>Anatomy
Code
<Table>
<TableCaption />
<TableHeader>
<TableRow>
<TableHead />
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell />
</TableRow>
</TableBody>
<TableFooter />
</Table>Features
Card Style Variant
Table styled as card rows with isolated row containers (variant="card").
API Reference
Table
The main table container component. Set variant="card" for a card-style table: separated borders, rounded corners, and row surfaces that read as cards. That pairs well with a Frame (page chrome) or Card (card shell with optional header actions). The default variant is a simpler row layout with standard borders.
| Prop | Type | Default |
|---|---|---|
className | string | |
variant | default|card | default |
Code
<Table>
<TableHeader>...</TableHeader>
<TableBody>...</TableBody>
</Table>
<Table variant="card">
<TableHeader>...</TableHeader>
<TableBody>...</TableBody>
</Table>TableHeader
Header section of the table containing column headers.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableHeader>
<TableRow>
<TableHead>Header</TableHead>
</TableRow>
</TableHeader>TableBody
Body section of the table containing table rows and data.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableBody>
<TableRow>
<TableCell>Cell</TableCell>
</TableRow>
</TableBody>TableFooter
Footer section of the table.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableFooter>
<TableRow>
<TableCell>Footer</TableCell>
</TableRow>
</TableFooter>TableRow
A row in the table.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableRow>
<TableCell>Cell</TableCell>
</TableRow>TableHead
A header cell in the table.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableHead>Header</TableHead>TableCell
A data cell in the table.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableCell>Cell</TableCell>TableCaption
A caption for the table.
| Prop | Type | Default |
|---|---|---|
className | string |
Code
<TableCaption>Caption</TableCaption>Examples
Frame with card-style table
Table with TanStack Table and checkboxes
Table with TanStack Table, sorting, and pagination
CardFrame with TanStack Table and checkboxes
CardFrame with card-style table
CardFrame with TanStack Table, sorting, and pagination
CardFrame with TanStack Table, sorting, and pagination