langfuse

1
import * as React from "react";
2

3
import { cn } from "@/src/utils/tailwind";
4

5
const Table = React.forwardRef<
6
  HTMLTableElement,
7
  React.HTMLAttributes<HTMLTableElement>
8
>(({ className, ...props }, ref) => (
9
  <div className="relative w-full overflow-auto">
10
    <table
11
      ref={ref}
12
      className={cn("w-full caption-bottom text-sm", className)}
13
      {...props}
14
    />
15
  </div>
16
));
17
Table.displayName = "Table";
18

19
const TableHeader = React.forwardRef<
20
  HTMLTableSectionElement,
21
  React.HTMLAttributes<HTMLTableSectionElement>
22
>(({ className, ...props }, ref) => (
23
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
24
));
25
TableHeader.displayName = "TableHeader";
26

27
const TableBody = React.forwardRef<
28
  HTMLTableSectionElement,
29
  React.HTMLAttributes<HTMLTableSectionElement>
30
>(({ className, ...props }, ref) => (
31
  <tbody
32
    ref={ref}
33
    className={cn("[&_tr:last-child]:border-0", className)}
34
    {...props}
35
  />
36
));
37
TableBody.displayName = "TableBody";
38

39
const TableFooter = React.forwardRef<
40
  HTMLTableSectionElement,
41
  React.HTMLAttributes<HTMLTableSectionElement>
42
>(({ className, ...props }, ref) => (
43
  <tfoot
44
    ref={ref}
45
    className={cn(
46
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
47
      className,
48
    )}
49
    {...props}
50
  />
51
));
52
TableFooter.displayName = "TableFooter";
53

54
const TableRow = React.forwardRef<
55
  HTMLTableRowElement,
56
  React.HTMLAttributes<HTMLTableRowElement>
57
>(({ className, ...props }, ref) => (
58
  <tr
59
    ref={ref}
60
    className={cn(
61
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
62
      className,
63
    )}
64
    {...props}
65
  />
66
));
67
TableRow.displayName = "TableRow";
68

69
const TableHead = React.forwardRef<
70
  HTMLTableCellElement,
71
  React.ThHTMLAttributes<HTMLTableCellElement>
72
>(({ className, ...props }, ref) => (
73
  <th
74
    ref={ref}
75
    className={cn(
76
      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
77
      className,
78
    )}
79
    {...props}
80
  />
81
));
82
TableHead.displayName = "TableHead";
83

84
const TableCell = React.forwardRef<
85
  HTMLTableCellElement,
86
  React.TdHTMLAttributes<HTMLTableCellElement>
87
>(({ className, ...props }, ref) => (
88
  <td
89
    ref={ref}
90
    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
91
    {...props}
92
  />
93
));
94
TableCell.displayName = "TableCell";
95

96
const TableCaption = React.forwardRef<
97
  HTMLTableCaptionElement,
98
  React.HTMLAttributes<HTMLTableCaptionElement>
99
>(({ className, ...props }, ref) => (
100
  <caption
101
    ref={ref}
102
    className={cn("mt-4 text-sm text-muted-foreground", className)}
103
    {...props}
104
  />
105
));
106
TableCaption.displayName = "TableCaption";
107

108
export {
109
  Table,
110
  TableHeader,
111
  TableBody,
112
  TableFooter,
113
  TableHead,
114
  TableRow,
115
  TableCell,
116
  TableCaption,
117
};
118