feat(ST-509): add Table UI primitives (Table, Header, Body, Row, Head, Cell)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-25 19:55:23 +02:00
parent fbd56aa934
commit 5dd89739ce

41
components/ui/table.tsx Normal file
View file

@ -0,0 +1,41 @@
import { cn } from '@/lib/utils'
function Table({ className, ...props }: React.ComponentProps<'table'>) {
return (
<div className="relative w-full overflow-auto">
<table className={cn('w-full caption-bottom text-sm', className)} {...props} />
</div>
)
}
function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
return <thead className={cn('[&_tr]:border-b [&_tr]:border-border', className)} {...props} />
}
function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
return <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
}
function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
return (
<tr
className={cn('border-b border-border transition-colors', className)}
{...props}
/>
)
}
function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
return (
<th
className={cn('h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground', className)}
{...props}
/>
)
}
function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
return <td className={cn('px-3 py-2.5 align-top', className)} {...props} />
}
export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }