| 1 | /** |
| 2 | * Table - 表格组件 |
| 3 | * 用于显示表格数据 |
| 4 | */ |
| 5 | |
| 6 | 'use client' |
| 7 | |
| 8 | import { cn } from '@/utils/className' |
| 9 | |
| 10 | interface TableProps extends React.HTMLAttributes<HTMLTableElement> { |
| 11 | children?: React.ReactNode |
| 12 | containerClassName?: string |
| 13 | containerRef?: React.Ref<HTMLDivElement> |
| 14 | } |
| 15 | |
| 16 | function Table({ className, children, containerClassName, containerRef, ...props }: TableProps) { |
| 17 | return ( |
| 18 | <div ref={containerRef} className={cn('w-full overflow-auto', containerClassName)}> |
| 19 | <table className={cn('w-full caption-bottom text-sm', className)} {...props}> |
| 20 | {children} |
| 21 | </table> |
| 22 | </div> |
| 23 | ) |
| 24 | } |
| 25 | |
| 26 | function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) { |
| 27 | return <thead className={cn('[&_tr]:border-b [&_tr]:border-border/50', className)} {...props} /> |
| 28 | } |
| 29 | |
| 30 | function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) { |
| 31 | return <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} /> |
| 32 | } |
| 33 | |
| 34 | function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) { |
| 35 | return ( |
| 36 | <tr |
| 37 | className={cn( |
| 38 | 'border-b border-border/30 transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted', |
| 39 | className, |
| 40 | )} |
| 41 | {...props} |
| 42 | /> |
| 43 | ) |
| 44 | } |
| 45 | |
| 46 | function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) { |
| 47 | return ( |
| 48 | <th |
| 49 | className={cn( |
| 50 | 'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', |
| 51 | className, |
| 52 | )} |
| 53 | {...props} |
| 54 | /> |
| 55 | ) |
| 56 | } |
| 57 | |
| 58 | function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) { |
| 59 | return ( |
| 60 | <td className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} /> |
| 61 | ) |
| 62 | } |
| 63 | |
| 64 | export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } |
| 65 |