Table
A simple table component for displaying tabular data.
Table composes Base UI's useRender and mergeProps into a div container with
table, thead, tbody, tfoot, tr, th, td and caption parts. Set
variant='card' for separated borders and rounded row surfaces; every part
marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/tableExample
table-example.tsx
| Project | Status | Team | Budget |
|---|---|---|---|
| Website Redesign | Frontend Team | $12,500 | |
| Mobile App | Mobile Team | $8,750 | |
| API Integration | Backend Team | $5,200 | |
| Database Migration | DevOps Team | $3,800 | |
| User Dashboard | UX Team | $7,200 | |
| Security Audit | 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';
const TableExample = () => (
<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-success'
/>
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-warning'
/>
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-success'
/>
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-success'
/>
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-destructive'
/>
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>
);
export default TableExample;
Usage
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
const TableDemo = () => (
<Table>
<TableHeader>
<TableRow>
<TableHead>Project</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>kosori</TableCell>
<TableCell>Active</TableCell>
</TableRow>
</TableBody>
</Table>
);