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