26/Formularios y datos

Tabla de datos

Tabla con orden por columna, búsqueda, filtro, paginación y selección de filas. Sin JS se ve como una tabla normal.

Completa

Prueba ordenar por monto o fecha, buscar, filtrar por estado y seleccionar filas.

Nombre	Área	Estado	Monto	Última compra
María Ramírez	Ventas	activo	Q 48.210	2026-09-14
José López	Soporte	activo	Q 12.900	2026-08-02
Ana Pérez	Operaciones	pausado	Q 30.500	2026-07-21
Luis Gómez	Ventas	activo	Q 8700	2026-10-01
Carla Méndez	Finanzas	inactivo	Q 0	2026-03-11
Pedro Castillo	Soporte	activo	Q 15.420	2026-09-30
Sofía Herrera	Operaciones	activo	Q 22.100	2026-06-18
Diego Morales	Ventas	pausado	Q 5300	2026-05-05

HTML

<div class="cb-table-wrap rounded-none border-0" data-cb-table data-cb-page-size="5">
  <div class="cb-table-toolbar">
    <div class="cb-table-toolbar__filters">
      <input class="cb-input cb-input--sm" type="search" placeholder="Buscar..." aria-label="Buscar en la tabla" data-cb-table-search>
      <div class="cb-select"><select class="cb-input cb-input--sm" aria-label="Filtrar por estado" data-cb-table-filter="estado"><option value="">Todos los estados</option><option value="activo">Activo</option><option value="pausado">Pausado</option><option value="inactivo">Inactivo</option></select></div>
    </div>
    <button class="cb-btn cb-btn--outline cb-btn--sm" type="button">Exportar</button>
  </div>
  <div class="cb-table-scroll">
    <table class="cb-table">
      <thead>
        <tr>
          <th class="cb-table__check"><input class="cb-checkbox" type="checkbox" data-cb-table-select-all aria-label="Seleccionar todo"></th>
          <th scope="col" data-cb-sort>Nombre</th>
          <th scope="col" data-cb-sort>Área</th>
          <th scope="col">Estado</th>
          <th scope="col" class="cb-table__num" data-cb-sort="number">Monto</th>
          <th scope="col" data-cb-sort="date">Última compra</th>
        </tr>
      </thead>
      <tbody>
      <tr data-estado="activo">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a María Ramírez"></td>
        <td class="cb-table__strong">María Ramírez</td>
        <td>Ventas</td>
        <td><span class="cb-tag cb-tag--success">activo</span></td>
        <td class="cb-table__num" data-value="48210">Q 48.210</td>
        <td data-value="2026-09-14">2026-09-14</td>
      </tr>
      <tr data-estado="activo">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a José López"></td>
        <td class="cb-table__strong">José López</td>
        <td>Soporte</td>
        <td><span class="cb-tag cb-tag--success">activo</span></td>
        <td class="cb-table__num" data-value="12900">Q 12.900</td>
        <td data-value="2026-08-02">2026-08-02</td>
      </tr>
      <tr data-estado="pausado">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a Ana Pérez"></td>
        <td class="cb-table__strong">Ana Pérez</td>
        <td>Operaciones</td>
        <td><span class="cb-tag cb-tag--warning">pausado</span></td>
        <td class="cb-table__num" data-value="30500">Q 30.500</td>
        <td data-value="2026-07-21">2026-07-21</td>
      </tr>
      <tr data-estado="activo">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a Luis Gómez"></td>
        <td class="cb-table__strong">Luis Gómez</td>
        <td>Ventas</td>
        <td><span class="cb-tag cb-tag--success">activo</span></td>
        <td class="cb-table__num" data-value="8700">Q 8700</td>
        <td data-value="2026-10-01">2026-10-01</td>
      </tr>
      <tr data-estado="inactivo">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a Carla Méndez"></td>
        <td class="cb-table__strong">Carla Méndez</td>
        <td>Finanzas</td>
        <td><span class="cb-tag ">inactivo</span></td>
        <td class="cb-table__num" data-value="0">Q 0</td>
        <td data-value="2026-03-11">2026-03-11</td>
      </tr>
      <tr data-estado="activo">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a Pedro Castillo"></td>
        <td class="cb-table__strong">Pedro Castillo</td>
        <td>Soporte</td>
        <td><span class="cb-tag cb-tag--success">activo</span></td>
        <td class="cb-table__num" data-value="15420">Q 15.420</td>
        <td data-value="2026-09-30">2026-09-30</td>
      </tr>
      <tr data-estado="activo">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a Sofía Herrera"></td>
        <td class="cb-table__strong">Sofía Herrera</td>
        <td>Operaciones</td>
        <td><span class="cb-tag cb-tag--success">activo</span></td>
        <td class="cb-table__num" data-value="22100">Q 22.100</td>
        <td data-value="2026-06-18">2026-06-18</td>
      </tr>
      <tr data-estado="pausado">
        <td><input class="cb-checkbox" type="checkbox" data-cb-table-select aria-label="Seleccionar a Diego Morales"></td>
        <td class="cb-table__strong">Diego Morales</td>
        <td>Ventas</td>
        <td><span class="cb-tag cb-tag--warning">pausado</span></td>
        <td class="cb-table__num" data-value="5300">Q 5300</td>
        <td data-value="2026-05-05">2026-05-05</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="cb-table-footer">
    <span data-cb-table-status aria-live="polite"></span>
    <nav data-cb-table-pagination aria-label="Paginación de la tabla"></nav>
  </div>
</div>

Simple

Sin data-cb-table es solo estilo. cb-table--compact reduce el padding.

Plan	Usuarios	Precio
Básico	1	$9
Pro	10	$29

HTML

<div class="cb-table-wrap">
  <table class="cb-table cb-table--compact">
    <thead><tr><th scope="col">Plan</th><th scope="col" class="cb-table__num">Usuarios</th><th scope="col" class="cb-table__num">Precio</th></tr></thead>
    <tbody>
      <tr><td class="cb-table__strong">Básico</td><td class="cb-table__num">1</td><td class="cb-table__num">$9</td></tr>
      <tr><td class="cb-table__strong">Pro</td><td class="cb-table__num">10</td><td class="cb-table__num">$29</td></tr>
    </tbody>
  </table>
</div>

Clases y modificadores

Clase	Descripción
`.cb-table-wrap`	Caja con borde.
`.cb-table-toolbar`, `.cb-table-toolbar__filters`	Barra superior con búsqueda y filtros.
`.cb-table-scroll`	Scroll horizontal en pantallas chicas.
`.cb-table`	Tabla. `--compact` reduce el espaciado.
`.cb-table__strong`, `.cb-table__num`, `.cb-table__check`	Celda destacada, numérica (alineada a la derecha) y de selección.
`.cb-table__sort`	Botón de orden que el JS crea dentro del `th`.
`.cb-table-footer`	Pie con estado y paginación.

Atributos data-cb-*

Atributo	Descripción
`data-cb-table`	Activa el comportamiento.
`data-cb-page-size="n"`	Filas por página. Sin él no hay paginación.
`data-cb-sort` / `data-cb-sort="number\|date"`	En un `th`, permite ordenar esa columna.
`data-value`	En una celda, valor usado para ordenar en lugar del texto.
`data-cb-table-search`	Input que busca en todas las columnas (ignora tildes).
`data-cb-table-filter="clave"`	Select que compara su valor con `data-clave` de cada fila.
`data-cb-table-select` / `data-cb-table-select-all`	Checkboxes de fila y de encabezado.
`data-cb-table-status`, `data-cb-table-pagination`	Dónde escribir el estado y la paginación.
`data-cb-table-empty`	Texto cuando no hay resultados. Por defecto: "Sin resultados".
`data-cb-table-status-text`	Plantilla del estado, con `{start}`, `{end}` y `{total}`.
`data-cb-table-selected-text`	Plantilla de la selección, con `{count}`.
`data-cb-pagination-prev` / `data-cb-pagination-next`	aria-label de las flechas de la paginación.
`data-cb-pagination-page`	aria-label de cada página, con `{page}`.

JavaScript

Evento	Cuándo se dispara
`cb:sort`	Al ordenar (`detail.column`, `detail.direction`).
`cb:filter`	Al buscar o filtrar.
`cb:page`	Al cambiar de página (`detail.page`).
`cb:select`	Al cambiar la selección (`detail.rows`).

Leer las filas seleccionadas:

const table = document.querySelector('[data-cb-table]');
table.addEventListener('cb:select', (event) => {
  const ids = event.detail.rows.map((row) => row.dataset.id);
});

Accesibilidad

Los encabezados ordenables reciben aria-sort y un botón para usarlos con teclado.
Las filas seleccionadas llevan aria-selected="true".
El estado ("Mostrando 1–5 de 8") está en una región aria-live.
Cada checkbox de fila necesita aria-label con el nombre del registro.