List report

Patrón compuesto para listados grandes: .cl-listreport agrupa una barra de herramientas .cl-table-toolbar, una .cl-table y una paginación .cl-pagination + .cl-pager. Se combina con .cl-tabs por encima para filtrar por estado.

Patrón completo

Pestañas de filtro, barra de herramientas (búsqueda, tags activos, filtros, orden, vista), tabla con selección múltiple y paginación.

Nombre	Código	Categoría	Tipo	Monto	Fecha	Estado
MJMaría José Rodríguez VargasSubcategoría 1	1-1789-0345	Categoría A	Tipo X	₡850,000	15 abr 2021	Activo
DADiego Alvarado SolísSubcategoría 2	1-2244-0901	Categoría B	Tipo X	₡1,250,000	12 ago 2019	Activo
LVLaura Vargas MéndezSubcategoría 3	3-0511-0782	Categoría C	Tipo X	₡720,000	10 ene 2022	Activo
CMCarlos Méndez QuirósSubcategoría 4	1-1820-0334	Categoría D	Tipo X	₡1,400,000	4 nov 2024	Nuevo
ASAna Solano PicadoSubcategoría 1	2-0712-0089	Categoría A	Tipo X	₡780,000	22 jun 2020	Activo

Mostrando 1–5 de 147 registros

<div class="cl-tabs">
  <button class="cl-tab is-active">Todos <span class="cl-tab-count">147</span></button>
  <button class="cl-tab">Activos <span class="cl-tab-count">143</span></button>
  <button class="cl-tab">En revisión <span class="cl-tab-count">3</span></button>
  <button class="cl-tab">Inactivos <span class="cl-tab-count">1</span></button>
  <button class="cl-tab">Nuevos <span class="cl-tab-count">3</span></button>
</div>
<div class="cl-listreport">
  <div class="cl-table-toolbar">
    <div class="cl-input-wrap" style="flex: 1; max-width: 320px">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-3.5-3.5"/></svg>
      <input class="cl-input cl-input--with-icon" placeholder="Buscar por nombre, código o categoría">
    </div>
    <div class="cl-row" style="gap: 6px">
      <span class="cl-tag">Categoría: 3 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
      <span class="cl-tag">Tipo: X <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
      <button class="cl-btn cl-btn--ghost cl-btn--sm">Limpiar</button>
    </div>
    <span style="flex: 1"></span>
    <button class="cl-btn cl-btn--secondary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg> Filtros</button>
    <button class="cl-btn cl-btn--secondary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v16M4 8l3-4 3 4"/><path d="M17 20V4M14 16l3 4 3-4"/></svg> Ordenar</button>
    <div class="cl-btn-group">
      <button class="cl-btn is-active" title="Tabla"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg></button>
      <button class="cl-btn" title="Tarjetas"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/><path d="m3 18 9 5 9-5"/></svg></button>
    </div>
  </div>
  <table class="cl-table">
    <thead>
      <tr>
        <th style="width: 36px"><input type="checkbox"></th>
        <th>Nombre</th>
        <th>Código</th>
        <th>Categoría</th>
        <th>Tipo</th>
        <th class="num">Monto</th>
        <th>Fecha</th>
        <th>Estado</th>
        <th style="width: 32px"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td><span class="cl-person"><span class="cl-avatar">MJ</span><span class="cl-stack"><span class="cl-person-name">María José Rodríguez Vargas</span><span class="cl-person-sub">Subcategoría 1</span></span></span></td>
        <td class="cl-mono cell-sub">1-1789-0345</td>
        <td>Categoría A</td>
        <td><span class="cl-badge cl-badge--neutral">Tipo X</span></td>
        <td class="num cl-mono">₡850,000</td>
        <td class="cl-mono cell-sub">15 abr 2021</td>
        <td><span class="cl-badge cl-badge--positive">Activo</span></td>
        <td><button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Más opciones"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></svg></button></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td><span class="cl-person"><span class="cl-avatar cl-avatar--accent">DA</span><span class="cl-stack"><span class="cl-person-name">Diego Alvarado Solís</span><span class="cl-person-sub">Subcategoría 2</span></span></span></td>
        <td class="cl-mono cell-sub">1-2244-0901</td>
        <td>Categoría B</td>
        <td><span class="cl-badge cl-badge--neutral">Tipo X</span></td>
        <td class="num cl-mono">₡1,250,000</td>
        <td class="cl-mono cell-sub">12 ago 2019</td>
        <td><span class="cl-badge cl-badge--positive">Activo</span></td>
        <td><button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Más opciones"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></svg></button></td>
      </tr>
      <tr class="is-selected">
        <td><input type="checkbox" checked></td>
        <td><span class="cl-person"><span class="cl-avatar cl-avatar--accent">LV</span><span class="cl-stack"><span class="cl-person-name">Laura Vargas Méndez</span><span class="cl-person-sub">Subcategoría 3</span></span></span></td>
        <td class="cl-mono cell-sub">3-0511-0782</td>
        <td>Categoría C</td>
        <td><span class="cl-badge cl-badge--neutral">Tipo X</span></td>
        <td class="num cl-mono">₡720,000</td>
        <td class="cl-mono cell-sub">10 ene 2022</td>
        <td><span class="cl-badge cl-badge--positive">Activo</span></td>
        <td><button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Más opciones"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></svg></button></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td><span class="cl-person"><span class="cl-avatar">CM</span><span class="cl-stack"><span class="cl-person-name">Carlos Méndez Quirós</span><span class="cl-person-sub">Subcategoría 4</span></span></span></td>
        <td class="cl-mono cell-sub">1-1820-0334</td>
        <td>Categoría D</td>
        <td><span class="cl-badge cl-badge--neutral">Tipo X</span></td>
        <td class="num cl-mono">₡1,400,000</td>
        <td class="cl-mono cell-sub">4 nov 2024</td>
        <td><span class="cl-badge cl-badge--info">Nuevo</span></td>
        <td><button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Más opciones"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></svg></button></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td><span class="cl-person"><span class="cl-avatar cl-avatar--accent">AS</span><span class="cl-stack"><span class="cl-person-name">Ana Solano Picado</span><span class="cl-person-sub">Subcategoría 1</span></span></span></td>
        <td class="cl-mono cell-sub">2-0712-0089</td>
        <td>Categoría A</td>
        <td><span class="cl-badge cl-badge--neutral">Tipo X</span></td>
        <td class="num cl-mono">₡780,000</td>
        <td class="cl-mono cell-sub">22 jun 2020</td>
        <td><span class="cl-badge cl-badge--positive">Activo</span></td>
        <td><button class="cl-btn cl-btn--ghost cl-btn--sm cl-btn--icon" aria-label="Más opciones"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></svg></button></td>
      </tr>
    </tbody>
  </table>
  <div class="cl-pagination">
    <span>Mostrando 1–5 de 147 registros</span>
    <div class="cl-row" style="gap: 16px">
      <select class="cl-input cl-input--sm" style="width: 70px"><option>12</option><option>25</option><option>50</option></select>
      <div class="cl-pager">
        <button><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></svg></button>
        <button class="is-active">1</button>
        <button>2</button>
        <button>3</button>
        <button>…</button>
        <button>13</button>
        <button><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
      </div>
    </div>
  </div>
</div>

Barra de herramientas

.cl-table-toolbar sola: búsqueda con ícono, tags de filtro removibles (.cl-tag / .cl-tag-x) y acciones de tabla.

<div class="cl-table-toolbar">
  <div class="cl-input-wrap" style="flex: 1; max-width: 320px">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="cl-input cl-input--with-icon" placeholder="Buscar por nombre, código o categoría">
  </div>
  <div class="cl-row" style="gap: 6px">
    <span class="cl-tag">Categoría: 3 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
    <span class="cl-tag">Tipo: X <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
    <button class="cl-btn cl-btn--ghost cl-btn--sm">Limpiar</button>
  </div>
  <span style="flex: 1"></span>
  <button class="cl-btn cl-btn--secondary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg> Filtros</button>
  <button class="cl-btn cl-btn--secondary cl-btn--sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v16M4 8l3-4 3 4"/><path d="M17 20V4M14 16l3 4 3-4"/></svg> Ordenar</button>
  <div class="cl-btn-group">
    <button class="cl-btn is-active" title="Tabla"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg></button>
    <button class="cl-btn" title="Tarjetas"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/><path d="m3 18 9 5 9-5"/></svg></button>
  </div>
</div>

Paginación

.cl-pagination con selector de tamaño de página y .cl-pager para navegar entre páginas.

Mostrando 1–5 de 147 registros

<div class="cl-pagination">
  <span>Mostrando 1–5 de 147 registros</span>
  <div class="cl-row" style="gap: 16px">
    <select class="cl-input cl-input--sm" style="width: 70px"><option>12</option><option>25</option><option>50</option></select>
    <div class="cl-pager">
      <button><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></svg></button>
      <button class="is-active">1</button>
      <button>2</button>
      <button>3</button>
      <button>…</button>
      <button>13</button>
      <button><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg></button>
    </div>
  </div>
</div>