Table

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