Table

1"use client";
2
3import { ComponentProps } from "react";
4
5import { cn } from "@/lib/utils";
6
7function Table({ className, ...props }: 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-base", className)}
16        {...props}
17      />
18    </div>
19  );
20}
21
22function TableHeader({ className, ...props }: ComponentProps<"thead">) {
23  return (
24    <thead
25      data-slot="table-header"
26      className={cn(
27        "[&_tr]:border-b [&_tr]:border-b-border-border bg-background font-bold text-[13px] align-middle uppercase ltr:text-left! rtl:text-right! ",
28        className
29      )}
30      {...props}
31    />
32  );
33}
34
35function TableBody({ className, ...props }: ComponentProps<"tbody">) {
36  return (
37    <tbody
38      data-slot="table-body"
39      className={cn("[&_tr:last-child]:border-0", className)}
40      {...props}
41    />
42  );
43}
44
45function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
46  return (
47    <tfoot
48      data-slot="table-footer"
49      className={cn(
50        "bg-background font-semibold border-t border-t-border-border [&>tr]:last:border-b-0",
51        className
52      )}
53      {...props}
54    />
55  );
56}
57
58function TableRow({ className, ...props }: ComponentProps<"tr">) {
59  return (
60    <tr
61      data-slot="table-row"
62      className={cn(
63        "hover:bg-background data-[state=selected]:bg-background border-b border-b-border-border transition-colors",
64        className
65      )}
66      {...props}
67    />
68  );
69}
70
71function TableHead({ className, ...props }: ComponentProps<"th">) {
72  return (
73    <th
74      data-slot="table-head"
75      className={cn(
76        "text-foreground p-[.9rem_.75rem] whitespace-nowrap [&:has([role=checkbox])]:pr-0 ltr:first:pl-5 ltr:first:sm:pl-[25px] ltr:last:pr-5 ltr:last:sm:pr-[25px] rtl:first:pr-5 rtl:first:sm:pr-[25px] rtl:last:pl-5 rtl:last:sm:pl-[25px]",
77        className
78      )}
79      {...props}
80    />
81  );
82}
83
84function TableCell({ className, ...props }: ComponentProps<"td">) {
85  return (
86    <td
87      data-slot="table-cell"
88      className={cn(
89// … truncated