Tabla de datos.

<div class="ui-sample ui-data" data-data-table="true"><table><caption>Desocupación por región · may-jul 2026</caption><thead><tr><th scope="col">Región</th><th scope="col" data-numeric="true">Tasa</th><th scope="col" data-numeric="true">Variación anual</th></tr></thead><tbody><tr><th scope="row">Valparaíso</th><td data-numeric="true">8,1%</td><td data-numeric="true">+0,3 pp</td></tr><tr><th scope="row">Biobío</th><td data-numeric="true">7,6%</td><td data-numeric="true">−0,2 pp</td></tr></tbody></table><small>Fuente: INE · ENE</small></div>

<div class="ui-sample ui-data border border-slate-300 bg-white p-4 text-slate-950" data-data-table="true"><table class="w-full border-collapse text-left"><caption>Desocupación por región · may-jul 2026</caption><thead><tr><th class="border-b border-slate-300 p-2 align-top" scope="col">Región</th><th class="border-b border-slate-300 p-2 align-top" scope="col" data-numeric="true">Tasa</th><th class="border-b border-slate-300 p-2 align-top" scope="col" data-numeric="true">Variación anual</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top" scope="row">Valparaíso</th><td class="border-b border-slate-300 p-2 align-top" data-numeric="true">8,1%</td><td class="border-b border-slate-300 p-2 align-top" data-numeric="true">+0,3 pp</td></tr><tr><th class="border-b border-slate-300 p-2 align-top" scope="row">Biobío</th><td class="border-b border-slate-300 p-2 align-top" data-numeric="true">7,6%</td><td class="border-b border-slate-300 p-2 align-top" data-numeric="true">−0,2 pp</td></tr></tbody></table><small class="text-sm text-slate-600">Fuente: INE · ENE</small></div>

export interface DataTableColumn {
  /** Encabezado de la columna. */
  label: string;
  /** Alinea cifras a la derecha y usa dígitos tabulares en encabezado y celdas. */
  numeric?: boolean;
}

export interface DataTableRow {
  /** Encabezado de la fila (primera celda, `<th scope="row">`). */
  label: string;
  /** Celdas de datos en el orden de las columnas que siguen a la primera. */
  values: string[];
}

export interface DataTableProps {
  /** Título de la tabla (`<caption>`): qué mide y qué período cubre. */
  caption?: string;
  /** Encabezados; el primero corresponde a la columna de encabezados de fila. */
  columns?: DataTableColumn[];
  rows?: DataTableRow[];
  /** Línea al pie con la fuente de los datos, incluido el prefijo («Fuente: INE · ENE»). */
  source?: string;
  className?: string;
}

const COLUMNS: DataTableColumn[] = [{ label: "Región" }, { label: "Tasa", numeric: true }, { label: "Variación anual", numeric: true }];

const ROWS: DataTableRow[] = [
  { label: "Valparaíso", values: ["8,1%", "+0,3 pp"] },
  { label: "Biobío", values: ["7,6%", "−0,2 pp"] },
];

/**
 * Tabla de datos con título, encabezados de columna y de fila, y la fuente al pie; se usa para publicar cifras que se leen por fila y columna.
 *
 * Los encabezados llevan `scope` para que el lector de pantalla anuncie la fila y la columna de cada celda.
 *
 * @example <DataTable caption="Desocupación por región · may-jul 2026" rows={[{ label: "Valparaíso", values: ["8,1%", "+0,3 pp"] }]} source="Fuente: INE · ENE" />
 */
export function DataTable({ caption = "Desocupación por región · may-jul 2026", columns = COLUMNS, rows = ROWS, source = "Fuente: INE · ENE", className }: DataTableProps) {
  if (!columns.length && !rows.length) return null;
  return (
    <div className={["ui-data", className].filter(Boolean).join(" ")} data-data-table>
      <table>
        {caption ? <caption>{caption}</caption> : null}
        {columns.length ? (
          <thead>
            <tr>
              {columns.map((column, i) => (
                <th scope="col" data-numeric={column.numeric || undefined} key={`${column.label}-${i}`}>{column.label}</th>
              ))}
            </tr>
          </thead>
        ) : null}
        {rows.length ? (
          <tbody>
            {rows.map((row, i) => (
              <tr key={`${row.label}-${i}`}>
                <th scope="row">{row.label}</th>
                {row.values.map((value, j) => (
                  <td data-numeric={columns[j + 1]?.numeric || undefined} key={j}>{value}</td>
                ))}
              </tr>
            ))}
          </tbody>
        ) : null}
      </table>
      {source ? <small>{source}</small> : null}
    </div>
  );
}