table

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