jaydip.me
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 last:[&>tr]: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-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
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("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
91 {...props}
92 />
93))
94TableCell.displayName = "TableCell"
95
96const 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))
106TableCaption.displayName = "TableCaption"
107
108export {
109 Table,
110 TableHeader,
111 TableBody,
112 TableFooter,
113 TableHead,
114 TableRow,
115 TableCell,
116 TableCaption,
117}