table

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="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))
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(
46      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
47      className
48    )}
49    {...props}
50  />
51))
52TableFooter.displayName = "TableFooter"
53 
54const 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))
67TableRow.displayName = "TableRow"
68 
69const TableHead = React.forwardRef<
70  HTMLTableCellElement,
71  React.ThHTMLAttributes<HTMLTableCellElement>
72>(({ className, ...props }, ref) => (
73  <th
74    ref={ref}
75    className={cn(
76      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
77      className
78    )}
79    {...props}
80  />
81))
82TableHead.displayName = "TableHead"
83 
84const TableCell = React.forwardRef<
85  HTMLTableCellElement,
86  React.TdHTMLAttributes<HTMLTableCellElement>
87>(({ className, ...props }, ref) => (
88  <td
89    ref={ref}
90    className={cn(
91      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
92      className
93    )}
94    {...props}
95  />
96))
97TableCell.displayName = "TableCell"
98 
99const TableCaption = React.forwardRef<
100  HTMLTableCaptionElement,
101// … truncated