wasmeld/crates/wasmeld-console/web/src/components/ui/table.tsx

import { splitProps, type JSX } from "solid-js";
import { cn } from "../../lib/cn";

export type TableProps = JSX.HTMLAttributes<HTMLTableElement> & {
  containerClass?: string;
};

/** Responsive native table with a horizontal overflow boundary. */
export function Table(props: TableProps) {
  const [local, rest] = splitProps(props, ["class", "containerClass", "children"]);
  return (
    <div data-slot="table-container" class={cn("w-full overflow-x-auto", local.containerClass)}>
      <table
        {...rest}
        data-slot="table"
        class={cn("w-full min-w-[760px] border-collapse text-left text-sm", local.class)}
      >
        {local.children}
      </table>
    </div>
  );
}

export function TableHeader(props: JSX.HTMLAttributes<HTMLTableSectionElement>) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <thead {...rest} data-slot="table-header" class={cn(local.class)}>
      {local.children}
    </thead>
  );
}

export function TableBody(props: JSX.HTMLAttributes<HTMLTableSectionElement>) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <tbody {...rest} data-slot="table-body" class={cn(local.class)}>
      {local.children}
    </tbody>
  );
}

export function TableRow(props: JSX.HTMLAttributes<HTMLTableRowElement>) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <tr
      {...rest}
      data-slot="table-row"
      class={cn("transition-colors hover:bg-[#f8faf9] [&:last-child_td]:border-b-0", local.class)}
    >
      {local.children}
    </tr>
  );
}

export function TableHead(props: JSX.ThHTMLAttributes<HTMLTableCellElement>) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <th
      {...rest}
      data-slot="table-head"
      class={cn(
        "border-b border-line bg-canvas px-4 py-2.5 text-[11px] font-semibold uppercase text-muted",
        local.class,
      )}
    >
      {local.children}
    </th>
  );
}

export function TableCell(props: JSX.TdHTMLAttributes<HTMLTableCellElement>) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <td
      {...rest}
      data-slot="table-cell"
      class={cn("border-b border-line px-4 py-3 align-middle", local.class)}
    >
      {local.children}
    </td>
  );
}