Accessible Table

import React, { useMemo, useState } from "react";
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import "./AccessibleTable.css";

/**
 * AccessibleTable — semantic, optionally sortable, optionally scrollable.
 *
 * Props
 *   caption:    string — becomes <caption>; required for a11y
 *   columns:    [{ key, label, type?: "string" | "number", sortable?: true }]
 *   rows:       array of objects keyed by column.key
 *   rowHeader:  key of the column to render as <th scope="row"> (default columns[0])
 *   scrollable: true to wrap in role=region tabindex=0 for horizontal scroll
 */
export default function AccessibleTable({
  caption, columns, rows,
  rowHeader,
  scrollable = false,
  initialSort,                           // { key, dir: "ascending"|"descending" }
}) {
  const headerKey = rowHeader ?? columns[0]?.key;
  const [sort, setSort] = useState(initialSort ?? null);

  const sortedRows = useMemo(() => {
    if (!sort) return rows;
    const col = columns.find((c) => c.key === sort.key);
    if (!col) return rows;
    const sign = sort.dir === "ascending" ? 1 : -1;
    return [...rows].sort((a, b) => {
      if (col.type === "number") return (a[sort.key] - b[sort.key]) * sign;
      return String(a[sort.key]).localeCompare(String(b[sort.key])) * sign;
    });
  }, [sort, rows, columns]);

  function toggleSort(key) {
    setSort((cur) =>
      cur?.key === key
        ? { key, dir: cur.dir === "ascending" ? "descending" : "ascending" }
        : { key, dir: "ascending" }
    );
  }

  function ariaSort(col) {
    if (!col.sortable) return undefined;
    if (sort?.key !== col.key) return "none";
    return sort.dir;
  }

  const captionId = `caption-${React.useId()}`;

  const table = (
    <table className="data-table">
      <caption id={captionId}>{caption}</caption>
      <thead>
        <tr>
          {columns.map((col) => {
            const isActive = sort?.key === col.key;
            const Icon = !isActive
              ? ArrowUpDown
              : sort.dir === "ascending"
              ? ArrowUp
              : ArrowDown;
            return (
              <th
                key={col.key}
                scope="col"
                aria-sort={ariaSort(col)}
              >
                {col.sortable ? (
                  <button type="button" onClick={() => toggleSort(col.key)}>
                    <span>{col.label}</span>
                    <Icon aria-hidden="true" size={14} />
                    <span className="sr-only">
                      {" "}
                      {isActive
                        ? `Sort by ${col.label} ${sort.dir === "ascending" ? "descending" : "ascending"}`
                        : `Sort by ${col.label} ascending`}
                    </span>
                  </button>
                ) : (
                  col.label
                )}
              </th>
            );
          })}
        </tr>
      </thead>
      <tbody>
        {sortedRows.map((row, i) => (
          <tr key={row[headerKey] ?? i}>
            {columns.map((col) =>
              col.key === headerKey ? (
                <th key={col.key} scope="row">{row[col.key]}</th>
              ) : (
                <td key={col.key}>{row[col.key]}</td>
              )
            )}
          </tr>
        ))}
      </tbody>
    </table>
  );

  if (!scrollable) return table;

  return (
    <div
      role="region"
      aria-labelledby={captionId}
      tabIndex={0}
      className="table-scroll"
    >
      {table}
    </div>
  );
}

import AccessibleTable from "./AccessibleTable";

export default function AffiliatesPage() {
  const columns = [
    { key: "name",    label: "Partner",  sortable: true },
    { key: "signups", label: "Signups",  type: "number", sortable: true },
    { key: "revenue", label: "Revenue",  type: "number", sortable: true },
    { key: "updated", label: "Updated",  sortable: true },
  ];

  const rows = [
    { name: "Alice Khan",  signups: 128, revenue: 9450,  updated: "2026-10-18" },
    { name: "Ben Rao",     signups: 76,  revenue: 5120,  updated: "2026-10-15" },
    { name: "Carla Mehta", signups: 212, revenue: 15800, updated: "2026-10-19" },
  ];

  return (
    <AccessibleTable
      caption="Affiliate performance"
      columns={columns}
      rows={rows}
      initialSort={{ key: "revenue", dir: "descending" }}
      scrollable
    />
  );
}