Table

<div class="table-container" role="region" aria-label="User accounts" tabindex="0">
  <table>
    <caption class="sr-only">User accounts — sortable by name, email, and role</caption>
    <thead>
      <tr>
        <th scope="col">
          <input type="checkbox" aria-label="Select all rows" />
        </th>
        <th scope="col" aria-sort="ascending">
          <button type="button" class="sort-btn">
            Name <span aria-hidden="true">↑</span>
          </button>
        </th>
        <th scope="col" aria-sort="none">
          <button type="button" class="sort-btn">Email</button>
        </th>
        <th scope="col">Role</th>
        <th scope="col">Status</th>
        <th scope="col"><span class="sr-only">Actions</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" aria-label="Select Jane Cooper" /></td>
        <td>Jane Cooper</td>
        <td>jane@example.com</td>
        <td>Admin</td>
        <td><span class="badge badge-success">Active</span></td>
        <td>
          <button type="button" aria-label="Actions for Jane Cooper" class="btn btn-ghost btn-icon">
            ⋯
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

import { useState, useMemo, type ReactNode } from "react";

interface Column<T> {
  key: keyof T & string;
  header: string;
  sortable?: boolean;
  align?: "left" | "right" | "center";
  render?: (value: T[keyof T], row: T) => ReactNode;
}

interface TableProps<T extends { id: string }> {
  columns: Column<T>[];
  data: T[];
  selectable?: boolean;
  striped?: boolean;
  caption?: string;
}

export default function Table<T extends { id: string }>({
  columns,
  data,
  selectable = false,
  striped = false,
  caption,
}: TableProps<T>) {
  const [sortKey, setSortKey] = useState<string | null>(null);
  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
  const [selected, setSelected] = useState<Set<string>>(new Set());

  const sorted = useMemo(() => {
    if (!sortKey) return data;
    return [...data].sort((a, b) => {
      const av = a[sortKey as keyof T], bv = b[sortKey as keyof T];
      const cmp = String(av).localeCompare(String(bv));
      return sortDir === "asc" ? cmp : -cmp;
    });
  }, [data, sortKey, sortDir]);

  const toggleSort = (key: string) => {
    if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    else { setSortKey(key); setSortDir("asc"); }
  };

  return (
    <div className="table-container" role="region" aria-label={caption} tabIndex={0}>
      <table>
        {caption && <caption className="sr-only">{caption}</caption>}
        <thead>
          <tr>
            {selectable && (
              <th scope="col">
                <input
                  type="checkbox"
                  aria-label="Select all"
                  checked={selected.size === data.length && data.length > 0}
                  onChange={(e) =>
                    setSelected(e.target.checked ? new Set(data.map((r) => r.id)) : new Set())
                  }
                />
              </th>
            )}
            {columns.map((col) => (
              <th
                key={col.key}
                scope="col"
                aria-sort={sortKey === col.key ? sortDir === "asc" ? "ascending" : "descending" : undefined}
                style={{ textAlign: col.align ?? "left" }}
              >
                {col.sortable ? (
                  <button type="button" onClick={() => toggleSort(col.key)}>
                    {col.header} {sortKey === col.key && (sortDir === "asc" ? "↑" : "↓")}
                  </button>
                ) : col.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {sorted.map((row, i) => (
            <tr key={row.id} className={striped && i % 2 ? "bg-subtle" : ""}>
              {selectable && (
                <td>
                  <input
                    type="checkbox"
                    aria-label={`Select row ${row.id}`}
                    checked={selected.has(row.id)}
                    onChange={() => {
                      const next = new Set(selected);
                      next.has(row.id) ? next.delete(row.id) : next.add(row.id);
                      setSelected(next);
                    }}
                  />
                </td>
              )}
              {columns.map((col) => (
                <td key={col.key} style={{ textAlign: col.align ?? "left" }}>
                  {col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "")}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}