| 1 | import * as React from "react"; |
| 2 | |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | |
| 5 | const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>( |
| 6 | ({ className, ...props }, ref) => ( |
| 7 | <div className="relative w-full overflow-auto"> |
| 8 | <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} /> |
| 9 | </div> |
| 10 | ), |
| 11 | ); |
| 12 | Table.displayName = "Table"; |
| 13 | |
| 14 | const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( |
| 15 | ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />, |
| 16 | ); |
| 17 | TableHeader.displayName = "TableHeader"; |
| 18 | |
| 19 | const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( |
| 20 | ({ className, ...props }, ref) => ( |
| 21 | <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} /> |
| 22 | ), |
| 23 | ); |
| 24 | TableBody.displayName = "TableBody"; |
| 25 | |
| 26 | const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( |
| 27 | ({ className, ...props }, ref) => ( |
| 28 | <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} /> |
| 29 | ), |
| 30 | ); |
| 31 | TableFooter.displayName = "TableFooter"; |
| 32 | |
| 33 | const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>( |
| 34 | ({ className, ...props }, ref) => ( |
| 35 | <tr |
| 36 | ref={ref} |
| 37 | className={cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", className)} |
| 38 | {...props} |
| 39 | /> |
| 40 | ), |
| 41 | ); |
| 42 | TableRow.displayName = "TableRow"; |
| 43 | |
| 44 | const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>( |
| 45 | ({ className, ...props }, ref) => ( |
| 46 | <th |
| 47 | ref={ref} |
| 48 | className={cn( |
| 49 | "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", |
| 50 | className, |
| 51 | )} |
| 52 | {...props} |
| 53 | /> |
| 54 | ), |
| 55 | ); |
| 56 | TableHead.displayName = "TableHead"; |
| 57 | |
| 58 | const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>( |
| 59 | ({ className, ...props }, ref) => ( |
| 60 | <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} /> |
| 61 | ), |
| 62 | ); |
| 63 | TableCell.displayName = "TableCell"; |
| 64 | |
| 65 | const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>( |
| 66 | ({ className, ...props }, ref) => ( |
| 67 | <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} /> |
| 68 | ), |
| 69 | ); |
| 70 | TableCaption.displayName = "TableCaption"; |
| 71 | |
| 72 | export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }; |