Table

1import type { Component, JSX } from "solid-js";
2import { splitProps } from "solid-js";
3import { cn } from "~/lib/utils";
4 
5const Table: Component<JSX.HTMLAttributes<HTMLTableElement>> = (props) => {
6  const [local, rest] = splitProps(props, ["class"]);
7  return (
8    <div class="relative w-full overflow-auto">
9      <table class={cn("w-full caption-bottom text-sm", local.class)} {...rest} />
10    </div>
11  );
12};
13 
14const TableHeader: Component<JSX.HTMLAttributes<HTMLTableSectionElement>> = (props) => {
15  const [local, rest] = splitProps(props, ["class"]);
16  return <thead class={cn("[&_tr]:border-b", local.class)} {...rest} />;
17};
18 
19const TableBody: Component<JSX.HTMLAttributes<HTMLTableSectionElement>> = (props) => {
20  const [local, rest] = splitProps(props, ["class"]);
21  return <tbody class={cn("[&_tr:last-child]:border-0", local.class)} {...rest} />;
22};
23 
24const TableFooter: Component<JSX.HTMLAttributes<HTMLTableSectionElement>> = (props) => {
25  const [local, rest] = splitProps(props, ["class"]);
26  return (
27    <tfoot
28      class={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", local.class)}
29      {...rest}
30    />
31  );
32};
33 
34const TableRow: Component<JSX.HTMLAttributes<HTMLTableRowElement>> = (props) => {
35  const [local, rest] = splitProps(props, ["class"]);
36  return (
37    <tr
38      class={cn(
39        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
40        local.class,
41      )}
42      {...rest}
43    />
44  );
45};
46 
47const TableHead: Component<JSX.ThHTMLAttributes<HTMLTableCellElement>> = (props) => {
48  const [local, rest] = splitProps(props, ["class"]);
49  return (
50    <th
51      class={cn(
52        "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
53        "[&:has([role=checkbox])]:pr-0",
54        local.class,
55      )}
56      {...rest}
57    />
58  );
59};
60 
61const TableCell: Component<JSX.TdHTMLAttributes<HTMLTableCellElement>> = (props) => {
62  const [local, rest] = splitProps(props, ["class"]);
63  return <td class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", local.class)} {...rest} />;
64};
65 
66const TableCaption: Component<JSX.HTMLAttributes<HTMLTableCaptionElement>> = (props) => {
67  const [local, rest] = splitProps(props, ["class"]);
68  return (
69    <caption
70      class={cn("mt-4 text-sm text-muted-foreground", local.class)}
71      {...(rest as JSX.HTMLAttributes<HTMLTableCaptionElement>)}
72    />
73  );
74};
75 
76export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };