Simple Table

import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface SimpleTableProps {
  caption: string;
  headers: string[];
  rows: ReactNode[][];
  /** Column indexes aligned right (numbers). */
  numeric?: number[];
  /** Zebra striping. */
  striped?: boolean;
  footer?: ReactNode[];
  className?: string;
}

export function SimpleTable({ caption, headers, rows, numeric = [], striped = true, footer, className }: SimpleTableProps) {
  const align = (i: number) => (numeric.includes(i) ? "text-right tabular-nums" : "text-left");
  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-fg text-da-bg">
            {headers.map((h, i) => (
              <th key={h} scope="col" className={cn("px-4 py-2.5 font-da-mono text-[11px] font-bold tracking-da-label uppercase", i > 0 && "border-l-[length:var(--da-border-width)] border-current", align(i))}>
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={ri} className={cn("[&+tr]:da-stroke-t", striped && ri % 2 === 1 && "bg-da-surface-2")}>
              {r.map((c, ci) => (
                <td key={ci} className={cn("px-4 py-3", ci > 0 && "da-stroke-l", ci === 0 && "font-bold", numeric.includes(ci) && "font-da-mono", align(ci))}>
                  {c}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
        {footer && (
          <tfoot>
            <tr className="da-stroke-t bg-da-primary text-da-primary-fg">
              {footer.map((c, ci) => (
                <td key={ci} className={cn("px-4 py-3 font-bold", ci > 0 && "da-stroke-l", numeric.includes(ci) && "font-da-mono", align(ci))}>
                  {c}
                </td>
              ))}
            </tr>
          </tfoot>
        )}
      </table>
    </div>
  );
}

export default SimpleTable;