Tabla ordenable.

<div class="ui-sample ui-data"><table><caption>Conjuntos de datos publicados</caption><thead><tr><th scope="col" aria-sort="ascending"><button class="btn btn--quiet" type="button">Nombre ↑</button></th><th scope="col"><button class="btn btn--quiet" type="button">Actualización</button></th></tr></thead><tbody><tr><td>Empleo</td><td>25 ago 2026</td></tr><tr><td>Transporte</td><td>24 ago 2026</td></tr></tbody></table></div>

<div class="ui-sample ui-data border border-slate-300 bg-white p-4 text-slate-950"><table class="w-full border-collapse text-left"><caption>Conjuntos de datos publicados</caption><thead><tr><th class="border-b border-slate-300 p-2 align-top" scope="col" aria-sort="ascending"><button class="btn btn--quiet border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Nombre ↑</button></th><th class="border-b border-slate-300 p-2 align-top" scope="col"><button class="btn btn--quiet border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Actualización</button></th></tr></thead><tbody><tr><td class="border-b border-slate-300 p-2 align-top">Empleo</td><td class="border-b border-slate-300 p-2 align-top">25 ago 2026</td></tr><tr><td class="border-b border-slate-300 p-2 align-top">Transporte</td><td class="border-b border-slate-300 p-2 align-top">24 ago 2026</td></tr></tbody></table></div>

import type { MouseEventHandler } from "react";

export interface SortableTableColumn {
  /** Encabezado de la columna; si está ordenada, se le agrega la flecha del sentido. */
  label: string;
  /** Columna de cifras con alineación derecha y dígitos tabulares. */
  numeric?: boolean;
  /** Sentido del orden actual; sólo una columna lo lleva a la vez (`aria-sort`). */
  sort?: "ascending" | "descending";
  /** Se llama al pulsar el encabezado para ordenar por esta columna. */
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface SortableTableRow {
  /** Celdas de la fila, en el orden de las columnas. */
  values: string[];
}

export interface SortableTableProps {
  /** Título de la tabla (`<caption>`). */
  caption?: string;
  columns?: SortableTableColumn[];
  /** Filas ya ordenadas según la columna que lleva `sort`. */
  rows?: SortableTableRow[];
  className?: string;
}

const FLECHAS = { ascending: "↑", descending: "↓" } as const;

const COLUMNS: SortableTableColumn[] = [{ label: "Nombre", sort: "ascending" }, { label: "Actualización" }];

const ROWS: SortableTableRow[] = [
  { values: ["Empleo", "25 ago 2026"] },
  { values: ["Transporte", "24 ago 2026"] },
];

/**
 * Tabla cuyos encabezados son botones para pedir un orden; se usa en listados que se revisan por nombre, fecha o cifra.
 *
 * El componente no ordena: el `onClick` de cada columna avisa qué orden se pidió, las filas llegan ya ordenadas y la columna activa lleva `sort`, que se anuncia con `aria-sort`. Cada encabezado es un botón terciario (`btn btn--quiet`).
 *
 * @example <SortableTable columns={[{ label: "Nombre", sort: "descending", onClick: ordenarPorNombre }, { label: "Actualización", onClick: ordenarPorFecha }]} rows={[{ values: ["Transporte", "25 ago 2026"] }, { values: ["Empleo", "24 ago 2026"] }]} />
 */
export function SortableTable({ caption = "Conjuntos de datos publicados", columns = COLUMNS, rows = ROWS, className }: SortableTableProps) {
  if (!columns.length && !rows.length) return null;
  return (
    <div className={["ui-data", className].filter(Boolean).join(" ")}>
      <table>
        {caption ? <caption>{caption}</caption> : null}
        {columns.length ? (
          <thead>
            <tr>
              {columns.map((column, i) => (
                <th scope="col" aria-sort={column.sort} data-numeric={column.numeric || undefined} key={`${column.label}-${i}`}>
                  <button className="btn btn--quiet" type="button" onClick={column.onClick}>
                    {column.sort ? `${column.label} ${FLECHAS[column.sort]}` : column.label}
                  </button>
                </th>
              ))}
            </tr>
          </thead>
        ) : null}
        {rows.length ? (
          <tbody>
            {rows.map((row, i) => (
              <tr key={i}>
                {row.values.map((value, j) => (
                  <td data-numeric={columns[j]?.numeric || undefined} key={j}>{value}</td>
                ))}
              </tr>
            ))}
          </tbody>
        ) : null}
      </table>
    </div>
  );
}