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