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:
parent
fbd56aa934
commit
5dd89739ce
1 changed files with 41 additions and 0 deletions
41
components/ui/table.tsx
Normal file
41
components/ui/table.tsx
Normal 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 }
|
||||
Loading…
Add table
Add a link
Reference in a new issue