> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.
# Table
> A responsive table component.
## Installation
```bash npm theme={null}
npx shadcn@latest add table
```
```bash yarn theme={null}
yarn dlx shadcn@latest add table
```
```bash pnpm theme={null}
pnpm dlx shadcn@latest add table
```
## Usage
```tsx theme={null}
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
```
```tsx theme={null}
A list of your recent invoices.
Invoice
Status
Method
Amount
INV001
Paid
Credit Card
$250.00
```
## Component API
### Table
Root table component with responsive wrapper.
```tsx theme={null}
function Table({ className, ...props }: React.ComponentProps<"table">)
```
### TableHeader
Table header section.
```tsx theme={null}
function TableHeader({ className, ...props }: React.ComponentProps<"thead">)
```
### TableBody
Table body section.
```tsx theme={null}
function TableBody({ className, ...props }: React.ComponentProps<"tbody">)
```
### TableFooter
Table footer section.
```tsx theme={null}
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">)
```
### TableRow
Table row with hover state.
```tsx theme={null}
function TableRow({ className, ...props }: React.ComponentProps<"tr">)
```
### TableHead
Table header cell.
```tsx theme={null}
function TableHead({ className, ...props }: React.ComponentProps<"th">)
```
### TableCell
Table data cell.
```tsx theme={null}
function TableCell({ className, ...props }: React.ComponentProps<"td">)
```
### TableCaption
Table caption/title.
```tsx theme={null}
function TableCaption({ className, ...props }: React.ComponentProps<"caption">)
```
## Examples
### Basic Table
```tsx theme={null}
Name
Email
Role
John Doe
john@example.com
Developer
Jane Smith
jane@example.com
Designer
```
### With Footer
Table with footer totals:
```tsx theme={null}
Invoice
Amount
INV001
$250.00
INV002
$150.00
Total
$400.00
```
### With Actions
Table with action buttons:
```tsx theme={null}
import { MoreHorizontal } from "lucide-react"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
Name
Status
Actions
{items.map((item) => (
{item.name}
{item.status}
Edit
Delete
))}
```
### Selectable Rows
Table with checkbox selection:
```tsx theme={null}
function SelectableTable() {
const [selected, setSelected] = React.useState([])
return (
Name
Email
{users.map((user) => (
{
setSelected(
checked
? [...selected, user.id]
: selected.filter((id) => id !== user.id)
)
}}
/>
{user.name}
{user.email}
))}
)
}
```
### Sortable Headers
Clickable headers for sorting:
```tsx theme={null}
function SortableTable() {
const [sortBy, setSortBy] = React.useState("name")
const [sortOrder, setSortOrder] = React.useState<"asc" | "desc">("asc")
const handleSort = (key: string) => {
if (sortBy === key) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc")
} else {
setSortBy(key)
setSortOrder("asc")
}
}
return (
handleSort("name")}
>
Name {sortBy === "name" && (sortOrder === "asc" ? "↑" : "↓")}
handleSort("email")}
>
Email {sortBy === "email" && (sortOrder === "asc" ? "↑" : "↓")}
{/* Sorted data */}
)
}
```
### Striped Rows
Alternating row colors:
```tsx theme={null}
{items.map((item, index) => (
{item.name}
))}
```
### Empty State
Show message when no data:
```tsx theme={null}
Name
Email
{items.length === 0 ? (
No results.
) : (
items.map((item) => (
{item.name}
{item.email}
))
)}
```
## Data Tables
For advanced data tables with sorting, filtering, and pagination, combine the Table component with [@tanstack/react-table](https://tanstack.com/table/v8).
See the [Data Table](/docs/components/data-table) documentation for a complete example.
## Accessibility
* Semantic HTML table elements
* Proper header associations
* Responsive overflow handling
* Screen reader support
* Keyboard navigation