openstatus.dev
Openstatus
www.openstatus.dev
1import * as React from "react";
2
3import { cn } from "../lib/utils";
4
5const Table = React.forwardRef<
6 HTMLTableElement,
7 React.HTMLAttributes<HTMLTableElement>
8>(({ className, ...props }, ref) => (
9 <div className="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));
17Table.displayName = "Table";
18
19const 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));
25TableHeader.displayName = "TableHeader";
26
27const 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));
37TableBody.displayName = "TableBody";
38
39const TableFooter = React.forwardRef<
40 HTMLTableSectionElement,
41 React.HTMLAttributes<HTMLTableSectionElement>
42>(({ className, ...props }, ref) => (
43 <tfoot
44 ref={ref}
45 className={cn("bg-primary text-primary-foreground font-medium", className)}
46 {...props}
47 />
48));
49TableFooter.displayName = "TableFooter";
50
51const TableRow = React.forwardRef<
52 HTMLTableRowElement,
53 React.HTMLAttributes<HTMLTableRowElement>
54>(({ className, ...props }, ref) => (
55 <tr
56 ref={ref}
57 className={cn(
58 "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
59 className,
60 )}
61 {...props}
62 />
63));
64TableRow.displayName = "TableRow";
65
66const TableHead = React.forwardRef<
67 HTMLTableCellElement,
68 React.ThHTMLAttributes<HTMLTableCellElement>
69>(({ className, ...props }, ref) => (
70 <th
71 ref={ref}
72 className={cn(
73 "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
74 className,
75 )}
76 {...props}
77 />
78));
79TableHead.displayName = "TableHead";
80
81const TableCell = React.forwardRef<
82 HTMLTableCellElement,
83 React.TdHTMLAttributes<HTMLTableCellElement>
84>(({ className, ...props }, ref) => (
85 <td
86 ref={ref}
87 className={cn(
88 "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
89 className,
90 )}
91 {...props}
92 />
93));
94TableCell.displayName = "TableCell";
95
96const TableCaption = React.forwardRef<
97 HTMLTableCaptionElement,
98 React.HTMLAttributes<HTMLTableCaptionElement>
99>(({ className, ...props }, ref) => (
100 <caption
101 ref={ref}
102 className={cn("text-muted-foreground mt-4 text-sm", className)}
103 {...props}
104 />
105));
106TableCaption.displayName = "TableCaption";
107
108export {
109 Table,
110 TableHeader,
111 TableBody,
112 TableFooter,
113 TableHead,
114 TableRow,
115 TableCell,
116 TableCaption,
117};