Table
A responsive data table with sortable columns, per-column alignment, numeric formatting, and content-sized columns by default. Align by content type: text left, magnitudes right (numeric), identifier numbers (IDs/SKUs) left, action and icon-only columns right or center. Defaults to auto-layout: columns size to their content, visual rhythm comes from consistent cell padding. Opt into layout="fixed" when you need predictable widths.
Installation
$
Usage
import {
Table, TableHeader, TableBody, TableHead, TableRow, TableCell,
} from "@/components/ui/table"Examples
Default
| Product | Price | Sales | Revenue |
|---|---|---|---|
| Super Life | $29 | 847 | $24,563 |
| Super Work | $29 | 623 | $18,067 |
| Super Budget | $19 | 1,204 | $22,876 |
| Super Goals | $19 | 956 | $18,164 |
Sortable
Click any column header to sort. Click again to reverse direction.
| Building AI-Powered Business Tools | Published | Mar 15, 2026 | 2,847 |
| The Case for Variable Fonts | Published | Mar 8, 2026 | 1,923 |
| Design Systems That Scale | Draft | Mar 1, 2026 | 0 |
| Typography on the Modern Web | Published | Feb 22, 2026 | 3,102 |
| From Figma to Code | Published | Feb 15, 2026 | 1,456 |
Striped
| Product | Status | Price | Sales | Revenue |
|---|---|---|---|---|
| Super Life | Active | $29 | 847 | $24,563 |
| Super Work | Active | $29 | 623 | $18,067 |
| Super Budget | Active | $19 | 1,204 | $22,876 |
| Super Goals | Draft | $19 | 0 | $0 |
| Super Reads | Active | $24 | 412 | $9,888 |
| Super Notes | Active | $19 | 738 | $14,022 |
With Selected Row
| Product | Price | Sales | Revenue |
|---|---|---|---|
| Super Life | $29 | 847 | $24,563 |
| Super Work | $29 | 623 | $18,067 |
| Super Budget | $19 | 1,204 | $22,876 |
| Super Goals | $19 | 956 | $18,164 |