Simple table

"use client";

import * as React from "react";
import { ArrowDownIcon, ArrowUpIcon, ArrowUpDownIcon } from "lucide-react";
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

export type SimpleTableColumn<T> = {
  /** Key of the row value. Also the React key. */
  key: keyof T & string;
  /** Header label. */
  header: string;
  /** Text alignment. Numbers usually go right. */
  align?: "left" | "right" | "center";
  /** Turns the header into a sort button. Sorts by the raw value unless sortValue is given. */
  sortable?: boolean;
  /** Value used for sorting, when the raw value is not comparable. */
  sortValue?: (row: T) => string | number;
  /** Custom cell. Defaults to the raw value as text. */
  render?: (row: T) => React.ReactNode;
  /** Extra classes on the cells of this column. */
  className?: string;
};

type SortState<T> = { key: keyof T & string; direction: "asc" | "desc" } | null;

type SimpleTableProps<T> = Omit<React.ComponentProps<"div">, "children"> & {
  columns: SimpleTableColumn<T>[];
  rows: T[];
  getRowId: (row: T) => string | number;
  /** Visible caption under the table. */
  caption?: string;
  /** Keeps the header in view inside a scrolling container. Give the wrapper a height. */
  stickyHeader?: boolean;
  /** Row height. dense is 32px, default is 40px. */
  density?: "default" | "dense";
  /** Shown instead of the body when rows is empty. */
  empty?: React.ReactNode;
  /** Initial sort. */
  defaultSort?: SortState<T>;
};

/**
 * A typed table on shadcn's table primitives with client-side sorting.
 * Keep it for lists under a few hundred rows; beyond that, paginate on the server.
 */
export function SimpleTable<T>({
  columns,
  rows,
  getRowId,
  caption,
  stickyHeader = false,
  density = "default",
  empty,
  defaultSort = null,
  className,
  ...props
}: SimpleTableProps<T>) {
  const [sort, setSort] = React.useState<SortState<T>>(defaultSort);

  const sorted = React.useMemo(() => {
    if (!sort) return rows;
    const column = columns.find((c) => c.key === sort.key);
    if (!column) return rows;
    const value = (row: T) => column.sortValue?.(row) ?? (row[column.key] as unknown as string | number);
    const dir = sort.direction === "asc" ? 1 : -1;
    return [...rows].sort((a, b) => {
      const va = value(a);
      const vb = value(b);
      if (typeof va === "number" && typeof vb === "number") return (va - vb) * dir;
      return String(va).localeCompare(String(vb), undefined, { numeric: true, sensitivity: "base" }) * dir;
    });
  }, [rows, columns, sort]);

  const toggleSort = (key: keyof T & string) => {
    setSort((current) => {
      if (current?.key !== key) return { key, direction: "asc" };
      if (current.direction === "asc") return { key, direction: "desc" };
      return null;
    });
  };

  const cellHeight = density === "dense" ? "h-8" : "h-10";
  const alignClass = (align?: SimpleTableColumn<T>["align"]) =>
    align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";

  return (
    <div
      data-slot="simple-table"
      className={cn("rounded-lg border", stickyHeader && "overflow-auto", className)}
      {...props}
    >
      <Table>
        {caption && <TableCaption className="mt-0 mb-3 caption-bottom px-3">{caption}</TableCaption>}
        <TableHeader className={cn(stickyHeader && "sticky top-0 z-10 bg-background")}>
          <TableRow className="hover:bg-transparent">
            {columns.map((column) => {
              const active = sort?.key === column.key;
              const ariaSort = active
                ? sort.direction === "asc"
                  ? "ascending"
                  : "descending"
                : column.sortable
                  ? "none"
                  : undefined;
              const Icon = active ? (sort.direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
              return (
                <TableHead
                  key={column.key}
                  aria-sort={ariaSort}
                  className={cn("h-9 px-3 text-xs text-muted-foreground", alignClass(column.align), column.className)}
                >
                  {column.sortable ? (
                    <button
                      type="button"
                      onClick={() => toggleSort(column.key)}
                      className={cn(
                        "group/sort -mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 transition-colors duration-100 ease-out hover:bg-muted hover:text-foreground",
                        active && "text-foreground",
                        column.align === "right" && "flex-row-reverse",
                      )}
                    >
                      {column.header}
                      <Icon
                        aria-hidden="true"
                        className={cn(
                          "size-3.5 transition-opacity duration-100 ease-out",
                          active
                            ? "opacity-100"
                            : "opacity-0 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100",
                        )}
                      />
                      <span className="sr-only">
                        {active ? (sort.direction === "asc" ? ", sorted ascending" : ", sorted descending") : ", sort"}
                      </span>
                    </button>
                  ) : (
                    column.header
                  )}
                </TableHead>
              );
            })}
          </TableRow>
        </TableHeader>
        <TableBody>
          {sorted.length === 0 ? (
            <TableRow className="hover:bg-transparent">
              <TableCell
                colSpan={columns.length}
                className="h-24 px-3 text-center whitespace-normal text-muted-foreground"
              >
                {empty ?? "Nothing to show."}
              </TableCell>
            </TableRow>
          ) : (
            sorted.map((row) => (
              <TableRow key={getRowId(row)}>
                {columns.map((column) => (
                  <TableCell
                    key={column.key}
                    className={cn(cellHeight, "px-3 py-0", alignClass(column.align), column.className)}
                  >
                    {column.render ? column.render(row) : String(row[column.key] ?? "")}
                  </TableCell>
                ))}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
}