Tables

Tabla de datos con .cl-table: encabezados sticky, hover por fila y selección con .is-selected. Columnas numéricas: .num en TH y TD (alineación derecha + números tabulares) más .cl-mono para montos.

Tabla básica

Las filas resaltan al pasar el mouse. .cell-sub atenúa columnas secundarias; .num alinea los montos a la derecha.

Nombre	Código	Monto	Estado
María José Rodríguez Vargas	1-1789-0345	₡850,000	Activo
Diego Alvarado Solís	1-2244-0901	₡1,250,000	Activo
Laura Vargas Méndez	3-0511-0782	₡720,000	Activo
Carlos Méndez Quirós	1-1820-0334	₡1,400,000	Nuevo

<table class="cl-table">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Código</th>
      <th class="num">Monto</th>
      <th>Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>María José Rodríguez Vargas</td>
      <td class="cl-mono cell-sub">1-1789-0345</td>
      <td class="num cl-mono">₡850,000</td>
      <td><span class="cl-badge cl-badge--positive">Activo</span></td>
    </tr>
    <tr>
      <td>Diego Alvarado Solís</td>
      <td class="cl-mono cell-sub">1-2244-0901</td>
      <td class="num cl-mono">₡1,250,000</td>
      <td><span class="cl-badge cl-badge--positive">Activo</span></td>
    </tr>
    <tr>
      <td>Laura Vargas Méndez</td>
      <td class="cl-mono cell-sub">3-0511-0782</td>
      <td class="num cl-mono">₡720,000</td>
      <td><span class="cl-badge cl-badge--positive">Activo</span></td>
    </tr>
    <tr>
      <td>Carlos Méndez Quirós</td>
      <td class="cl-mono cell-sub">1-1820-0334</td>
      <td class="num cl-mono">₡1,400,000</td>
      <td><span class="cl-badge cl-badge--info">Nuevo</span></td>
    </tr>
  </tbody>
</table>

Tabla realista

Listado tomado del patrón list-report: selección múltiple, personas con avatar, montos a la derecha y fila seleccionada con .is-selected.

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

<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>

Tabla compacta

--compact reduce la altura de fila para pantallas con muchos registros.

Nombre	Código	Monto	Estado
María José Rodríguez Vargas	1-1789-0345	₡850,000	Activo
Diego Alvarado Solís	1-2244-0901	₡1,250,000	Activo
Laura Vargas Méndez	3-0511-0782	₡720,000	Activo
Carlos Méndez Quirós	1-1820-0334	₡1,400,000	Nuevo

<table class="cl-table cl-table--compact">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Código</th>
      <th class="num">Monto</th>
      <th>Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>María José Rodríguez Vargas</td>
      <td class="cl-mono cell-sub">1-1789-0345</td>
      <td class="num cl-mono">₡850,000</td>
      <td><span class="cl-badge cl-badge--positive">Activo</span></td>
    </tr>
    <tr>
      <td>Diego Alvarado Solís</td>
      <td class="cl-mono cell-sub">1-2244-0901</td>
      <td class="num cl-mono">₡1,250,000</td>
      <td><span class="cl-badge cl-badge--positive">Activo</span></td>
    </tr>
    <tr>
      <td>Laura Vargas Méndez</td>
      <td class="cl-mono cell-sub">3-0511-0782</td>
      <td class="num cl-mono">₡720,000</td>
      <td><span class="cl-badge cl-badge--positive">Activo</span></td>
    </tr>
    <tr>
      <td>Carlos Méndez Quirós</td>
      <td class="cl-mono cell-sub">1-1820-0334</td>
      <td class="num cl-mono">₡1,400,000</td>
      <td><span class="cl-badge cl-badge--info">Nuevo</span></td>
    </tr>
  </tbody>
</table>

Pie de totales

tfoot viene estilizado para filas de total: fondo sutil, borde superior y peso semibold.

Concepto	Monto
Monto base	₡720,000.00
Variable	₡180,000.00
Asociación	₡36,000.00
Total	₡936,000.00

<table class="cl-table">
  <thead>
    <tr>
      <th>Concepto</th>
      <th class="num">Monto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monto base</td>
      <td class="num cl-mono">₡720,000.00</td>
    </tr>
    <tr>
      <td>Variable</td>
      <td class="num cl-mono">₡180,000.00</td>
    </tr>
    <tr>
      <td>Asociación</td>
      <td class="num cl-mono">₡36,000.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td class="num cl-mono">₡936,000.00</td>
    </tr>
  </tfoot>
</table>