Data Display
Forms
Navigation
Table
A simple table component for displaying tabular data.
| Project | Status | Team | Budget |
|---|---|---|---|
| Website Redesign | Paid | Frontend Team | $12,500 |
| Mobile App | Unpaid | Mobile Team | $8,750 |
| API Integration | Pending | Backend Team | $5,200 |
| Database Migration | Paid | DevOps Team | $3,800 |
| User Dashboard | Paid | UX Team | $7,200 |
| Security Audit | Failed | Security Team | $2,100 |
| Total Budget | $39,550 | ||
import { Badge } from "@/components/ui/badge";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function Particle() {
return (
<Table>
<TableCaption>A list of current projects.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Project</TableHead>
<TableHead>Status</TableHead>
<TableHead>Team</TableHead>
<TableHead className="text-right">Budget</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">Website Redesign</TableCell>
<TableCell>
<Badge variant="outline">
<span
aria-hidden="true"
className="size-1.5 rounded-full bg-emerald-500"
/>
Paid
</Badge>
</TableCell>
<TableCell>Frontend Team</TableCell>
<TableCell className="text-right">$12,500</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">Mobile App</TableCell>
<TableCell>
<Badge variant="outline">
<span
aria-hidden="true"
className="size-1.5 rounded-full bg-muted-foreground/64"
/>
Unpaid
</Badge>
</TableCell>
<TableCell>Mobile Team</TableCell>
<TableCell className="text-right">$8,750</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">API Integration</TableCell>
<TableCell>
<Badge variant="outline">
<span
aria-hidden="true"
className="size-1.5 rounded-full bg-amber-500"
/>
Pending
</Badge>
</TableCell>
<TableCell>Backend Team</TableCell>
<TableCell className="text-right">$5,200</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">Database Migration</TableCell>
<TableCell>
<Badge variant="outline">
<span
aria-hidden="true"
className="size-1.5 rounded-full bg-emerald-500"
/>
Paid
</Badge>
</TableCell>
<TableCell>DevOps Team</TableCell>
<TableCell className="text-right">$3,800</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">User Dashboard</TableCell>
<TableCell>
<Badge variant="outline">
<span
aria-hidden="true"
className="size-1.5 rounded-full bg-emerald-500"
/>
Paid
</Badge>
</TableCell>
<TableCell>UX Team</TableCell>
<TableCell className="text-right">$7,200</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">Security Audit</TableCell>
<TableCell>
<Badge variant="outline">
<span
aria-hidden="true"
className="size-1.5 rounded-full bg-red-500"
/>
Failed
</Badge>
</TableCell>
<TableCell>Security Team</TableCell>
<TableCell className="text-right">$2,100</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>Total Budget</TableCell>
<TableCell className="text-right font-medium">$39,550</TableCell>
</TableRow>
</TableFooter>
</Table>
);
}
Installation
pnpm dlx cnippet@latest add table
Usage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"<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>On This Page