| 1 | import * as React from "react"; |
| 2 | |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | |
| 5 | const Table = React.forwardRef< |
| 6 | HTMLTableElement, |
| 7 | React.HTMLAttributes<HTMLTableElement> |
| 8 | >(({ className, ...props }, ref) => ( |
| 9 | <div className="relative w-full overflow-auto"> |
| 10 | <table |
| 11 | ref={ref} |
| 12 | className={cn("w-full caption-bottom text-sm", className)} |
| 13 | {...props} |
| 14 | /> |
| 15 | </div> |
| 16 | )); |
| 17 | Table.displayName = "Table"; |
| 18 | |
| 19 | const TableHeader = React.forwardRef< |
| 20 | HTMLTableSectionElement, |
| 21 | React.HTMLAttributes<HTMLTableSectionElement> |
| 22 | >(({ className, ...props }, ref) => ( |
| 23 | <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} /> |
| 24 | )); |
| 25 | TableHeader.displayName = "TableHeader"; |
| 26 | |
| 27 | const TableBody = React.forwardRef< |
| 28 | HTMLTableSectionElement, |
| 29 | React.HTMLAttributes<HTMLTableSectionElement> |
| 30 | >(({ className, ...props }, ref) => ( |
| 31 | <tbody |
| 32 | ref={ref} |
| 33 | className={cn("[&_tr:last-child]:border-0", className)} |
| 34 | {...props} |
| 35 | /> |
| 36 | )); |
| 37 | TableBody.displayName = "TableBody"; |
| 38 | |
| 39 | const TableFooter = React.forwardRef< |
| 40 | HTMLTableSectionElement, |
| 41 | React.HTMLAttributes<HTMLTableSectionElement> |
| 42 | >(({ className, ...props }, ref) => ( |
| 43 | <tfoot |
| 44 | ref={ref} |
| 45 | className={cn( |
| 46 | "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", |
| 47 | className, |
| 48 | )} |
| 49 | {...props} |
| 50 | /> |
| 51 | )); |
| 52 | TableFooter.displayName = "TableFooter"; |
| 53 | |
| 54 | const TableRow = React.forwardRef< |
| 55 | HTMLTableRowElement, |
| 56 | React.HTMLAttributes<HTMLTableRowElement> |
| 57 | >(({ className, ...props }, ref) => ( |
| 58 | <tr |
| 59 | ref={ref} |
| 60 | className={cn( |
| 61 | "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", |
| 62 | className, |
| 63 | )} |
| 64 | {...props} |
| 65 | /> |
| 66 | )); |
| 67 | TableRow.displayName = "TableRow"; |
| 68 | |
| 69 | const TableHead = React.forwardRef< |
| 70 | HTMLTableCellElement, |
| 71 | React.ThHTMLAttributes<HTMLTableCellElement> |
| 72 | >(({ className, ...props }, ref) => ( |
| 73 | <th |
| 74 | ref={ref} |
| 75 | className={cn( |
| 76 | "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", |
| 77 | className, |
| 78 | )} |
| 79 | {...props} |
| 80 | /> |
| 81 | )); |
| 82 | TableHead.displayName = "TableHead"; |
| 83 | |
| 84 | const TableCell = React.forwardRef< |
| 85 | HTMLTableCellElement, |
| 86 | React.TdHTMLAttributes<HTMLTableCellElement> |
| 87 | >(({ className, ...props }, ref) => ( |
| 88 | <td |
| 89 | ref={ref} |
| 90 | className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} |
| 91 | {...props} |
| 92 | /> |
| 93 | )); |
| 94 | TableCell.displayName = "TableCell"; |
| 95 | |
| 96 | const TableCaption = React.forwardRef< |
| 97 | HTMLTableCaptionElement, |
| 98 | React.HTMLAttributes<HTMLTableCaptionElement> |
| 99 | >(({ className, ...props }, ref) => ( |
| 100 | <caption |
| 101 | ref={ref} |
| 102 | className={cn("mt-4 text-sm text-muted-foreground", className)} |
| 103 | {...props} |
| 104 | /> |
| 105 | )); |
| 106 | TableCaption.displayName = "TableCaption"; |
| 107 | |
| 108 | export { |
| 109 | Table, |
| 110 | TableBody, |
| 111 | TableCaption, |
| 112 | TableCell, |
| 113 | TableFooter, |
| 114 | TableHead, |
| 115 | TableHeader, |
| 116 | TableRow, |
| 117 | }; |
| 118 |