Table

1import { cn } from "@/lib/utils";2import { sprawlify } from "@sprawlify/solid";3import type { ComponentProps } from "solid-js";4import { splitProps } from "solid-js";56function Table(props: ComponentProps<typeof sprawlify.table>) {7  const [local, others] = splitProps(props, ["class"]);89  return (10    <div data-slot="table-container" class="relative w-full overflow-x-auto">11      <sprawlify.table12        data-slot="table"13        class={cn("w-full caption-bottom text-sm", local.class)}14        {...others}15      />16    </div>17  );18}1920function TableHeader(props: ComponentProps<typeof sprawlify.thead>) {21  const [local, others] = splitProps(props, ["class"]);2223  return (24    <sprawlify.thead25      data-slot="table-header"26      class={cn("[&_tr]:border-b", local.class)}27      {...others}28    />29  );30}3132function TableBody(props: ComponentProps<typeof sprawlify.tbody>) {33  const [local, others] = splitProps(props, ["class"]);3435  return (36    <sprawlify.tbody37      data-slot="table-body"38      class={cn("[&_tr:last-child]:border-0", local.class)}39      {...others}40    />41  );42}4344function TableFooter(props: ComponentProps<typeof sprawlify.tfoot>) {45  const [local, others] = splitProps(props, ["class"]);4647  return (48    <sprawlify.tfoot49      data-slot="table-footer"50      class={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", local.class)}51      {...others}52    />53  );54}5556function TableRow(props: ComponentProps<typeof sprawlify.tr>) {57  const [local, others] = splitProps(props, ["class"]);5859  return (60    <sprawlify.tr61      data-slot="table-row"62      class={cn(63        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",64        local.class,65      )}66      {...others}67    />68  );69}7071function TableHead(props: ComponentProps<typeof sprawlify.th>) {72  const [local, others] = splitProps(props, ["class"]);7374  return (75    <sprawlify.th76      data-slot="table-head"77      class={cn(78        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",79        local.class,80      )}81      {...others}82    />83  );84}8586function TableCell(props: ComponentProps<typeof sprawlify.td>) {87  const [local, others] = splitProps(props, ["class"]);8889  return (90    <sprawlify.td91      data-slot="table-cell"92      class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", local.class)}93      {...others}94    />95  );96}9798function TableCaption(props: ComponentProps<typeof sprawlify.caption>) {99  const [local, others] = splitProps(props, ["class"]);100101  return (102    <sprawlify.caption103      data-slot="table-caption"104      class={cn("mt-4 text-sm text-muted-foreground", local.class)}105      {...others}106    />107  );108}109110export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };111