Table

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