Expandable Table

"use client";

import { Fragment, useState, type ReactNode } from "react";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ExpandableTableRow {
  id: string;
  cells: ReactNode[];
  /** Content revealed below the row. */
  detail: ReactNode;
}

export interface ExpandableTableProps {
  caption: string;
  headers: string[];
  rows: ExpandableTableRow[];
  /** Allow several rows open at once. */
  multiple?: boolean;
  className?: string;
}

export function ExpandableTable({ caption, headers, rows, multiple = false, className }: ExpandableTableProps) {
  const [open, setOpen] = useState<string[]>([]);
  const toggle = (id: string) =>
    setOpen((o) => (o.includes(id) ? o.filter((x) => x !== id) : multiple ? [...o, id] : [id]));

  return (
    <div className={cn("da-stroke overflow-x-auto bg-da-surface text-da-surface-fg shadow-da-md", className)}>
      <table className="w-full border-collapse text-sm">
        <caption className="da-stroke-b px-4 py-3 text-left font-da-display text-lg tracking-da-display uppercase">{caption}</caption>
        <thead>
          <tr className="da-stroke-b bg-da-surface-2">
            <th scope="col" className="w-12">
              <span className="sr-only">Expand</span>
            </th>
            {headers.map((h) => (
              <th key={h} scope="col" className="px-4 py-2.5 text-left font-da-mono text-[11px] font-bold tracking-da-label uppercase">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => {
            const isOpen = open.includes(r.id);
            return (
              <Fragment key={r.id}>
                <tr className={cn(i > 0 && "da-stroke-t", isOpen && "bg-da-primary text-da-primary-fg")}>
                  <td className="pl-3">
                    <button
                      type="button"
                      onClick={() => toggle(r.id)}
                      aria-expanded={isOpen}
                      aria-controls={`detail-${r.id}`}
                      aria-label={isOpen ? "Collapse row" : "Expand row"}
                      className="da-focus da-stroke grid size-7 place-items-center bg-da-surface text-da-surface-fg"
                    >
                      <ChevronRight aria-hidden className={cn("size-4 transition-transform duration-(--da-duration)", isOpen && "rotate-90")} strokeWidth={3} />
                    </button>
                  </td>
                  {r.cells.map((c, ci) => (
                    <td key={ci} className={cn("px-4 py-3", ci === 0 && "font-bold")}>
                      {c}
                    </td>
                  ))}
                </tr>
                <tr id={`detail-${r.id}`} hidden={!isOpen} className="da-stroke-t bg-da-surface-2">
                  <td colSpan={headers.length + 1} className="px-4 py-4 pl-16">
                    {r.detail}
                  </td>
                </tr>
              </Fragment>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default ExpandableTable;