1import * as React from "react";
2
3import { cn } from "~/lib/utils";
4
5function Table({ className, ...props }: React.ComponentProps<"table">) {
6 return (
7 <div data-slot="table-container" className="relative w-full overflow-x-auto">
8 <table
9 data-slot="table"
10 className={cn("w-full caption-bottom text-xs", className)}
11 {...props}
12 />
13 </div>
14 );
15}
16
17function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
18 return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
19}
20
21function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
22 return (
23 <tbody
24 data-slot="table-body"
25 className={cn("[&_tr:last-child]:border-0", className)}
26 {...props}
27 />
28 );
29}
30
31function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
32 return (
33 <tr
34 data-slot="table-row"
35 className={cn(
36 "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
37 className,
38 )}
39 {...props}
40 />
41 );
42}
43
44function TableHead({ className, ...props }: React.ComponentProps<"th">) {
45 return (
46 <th
47 data-slot="table-head"
48 className={cn(
49 "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
50 className,
51 )}
52 {...props}
53 />
54 );
55}
56
57function TableCell({ className, ...props }: React.ComponentProps<"td">) {
58 return (
59 <td
60 data-slot="table-cell"
61 className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
62 {...props}
63 />
64 );
65}
66
67export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };