Tabla responsive.

<div class="ui-sample ui-data" data-responsive-table="true"><table><caption>Servicios por comuna</caption><thead><tr><th>Comuna</th><th>Buses activos</th><th>Actualización</th></tr></thead><tbody><tr><th>Santiago</th><td data-label="Buses activos">1.260</td><td data-label="Actualización">18:24 CLT</td></tr><tr><th>Maipú</th><td data-label="Buses activos">842</td><td data-label="Actualización">18:23 CLT</td></tr></tbody></table></div>

<div class="ui-sample ui-data border border-slate-300 bg-white p-4 text-slate-950" data-responsive-table="true"><table class="w-full border-collapse text-left"><caption>Servicios por comuna</caption><thead><tr><th class="border-b border-slate-300 p-2 align-top">Comuna</th><th class="border-b border-slate-300 p-2 align-top">Buses activos</th><th class="border-b border-slate-300 p-2 align-top">Actualización</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Santiago</th><td class="border-b border-slate-300 p-2 align-top" data-label="Buses activos">1.260</td><td class="border-b border-slate-300 p-2 align-top" data-label="Actualización">18:24 CLT</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Maipú</th><td class="border-b border-slate-300 p-2 align-top" data-label="Buses activos">842</td><td class="border-b border-slate-300 p-2 align-top" data-label="Actualización">18:23 CLT</td></tr></tbody></table></div>

export interface ResponsiveTableColumn {
  /** Encabezado de la columna; cada celda de la columna lo repite en `data-label`. */
  label: string;
}

export interface ResponsiveTableRow {
  /** Encabezado de la fila (primera celda). */
  label: string;
  /** Celdas de datos en el orden de las columnas que siguen a la primera. */
  values: string[];
}

export interface ResponsiveTableProps {
  /** Título de la tabla (`<caption>`). */
  caption?: string;
  /** Encabezados; el primero corresponde a la columna de encabezados de fila. */
  columns?: ResponsiveTableColumn[];
  rows?: ResponsiveTableRow[];
  className?: string;
}

const COLUMNS: ResponsiveTableColumn[] = [{ label: "Comuna" }, { label: "Buses activos" }, { label: "Actualización" }];

const ROWS: ResponsiveTableRow[] = [
  { label: "Santiago", values: ["1.260", "18:24 CLT"] },
  { label: "Maipú", values: ["842", "18:23 CLT"] },
];

/**
 * Tabla de datos para vistas que también se consultan en el teléfono: en pantallas angostas cada fila se apila y cada celda muestra el nombre de su columna, que lleva en `data-label`.
 *
 * `data-label` sale de `columns`: la celda `j` de una fila toma el encabezado `columns[j + 1]`.
 *
 * @example <ResponsiveTable caption="Servicios por comuna" rows={[{ label: "Santiago", values: ["1.260", "18:24 CLT"] }]} />
 */
export function ResponsiveTable({ caption = "Servicios por comuna", columns = COLUMNS, rows = ROWS, className }: ResponsiveTableProps) {
  if (!columns.length && !rows.length) return null;
  return (
    <div className={["ui-data", className].filter(Boolean).join(" ")} data-responsive-table>
      <table>
        {caption ? <caption>{caption}</caption> : null}
        {columns.length ? (
          <thead>
            <tr>
              {columns.map((column, i) => (
                <th key={`${column.label}-${i}`}>{column.label}</th>
              ))}
            </tr>
          </thead>
        ) : null}
        {rows.length ? (
          <tbody>
            {rows.map((row, i) => (
              <tr key={`${row.label}-${i}`}>
                <th>{row.label}</th>
                {row.values.map((value, j) => (
                  <td data-label={columns[j + 1]?.label} key={j}>{value}</td>
                ))}
              </tr>
            ))}
          </tbody>
        ) : null}
      </table>
    </div>
  );
}