openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import type * 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 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 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
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 "whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
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-muted-foreground text-sm", 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};