Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
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">$39,550</TableCell>
</TableRow>
</TableFooter>
</Table>
);
}
Installation
pnpm dlx shadcn@latest add @coss/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>API Reference
Table
The main table container component.
| Prop | Type | Default |
|---|---|---|
className | string |
<Table>
<TableHeader>...</TableHeader>
<TableBody>...</TableBody>
</Table>TableHeader
Header section of the table containing column headers.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableHeader>
<TableRow>
<TableHead>Header</TableHead>
</TableRow>
</TableHeader>TableBody
Body section of the table containing table rows and data.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableBody>
<TableRow>
<TableCell>Cell</TableCell>
</TableRow>
</TableBody>TableFooter
Footer section of the table.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableFooter>
<TableRow>
<TableCell>Footer</TableCell>
</TableRow>
</TableFooter>TableRow
A row in the table.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableRow>
<TableCell>Cell</TableCell>
</TableRow>TableHead
A header cell in the table.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableHead>Header</TableHead>TableCell
A data cell in the table.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableCell>Cell</TableCell>TableCaption
A caption for the table.
| Prop | Type | Default |
|---|---|---|
className | string |
<TableCaption>Caption</TableCaption>Examples
Framed Table
To achieve this framed look, simply wrap the table in a Frame component.
| 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 { Frame } from "@/components/ui/frame";
import {
Table,
TableBody,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function Particle() {
return (
<Frame className="w-full">
<Table>
<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">$39,550</TableCell>
</TableRow>
</TableFooter>
</Table>
</Frame>
);
}