Table

# Table Pattern

El Table es un patrón integral utilizado para mostrar datos estructurados de forma tabular. En lugar de ofrecer "Celdas" individuales sueltas sin semántica, este patrón orquesta la tabla completa asegurando su accesibilidad, relaciones de cabecera-dato y capacidad de albergar interactividad (filtros, ordenación, acciones masivas).

¿Por qué es un Pattern?

No se trata de un componente atómico aislado. Es una plantilla de orquestación que agrupa múltiples responsabilidades y reutiliza componentes existentes: - Organiza elementos nativos (<table>, <thead>, <tbody>, <tr>, <th>, <td>). - Reutiliza componentes de formulario como gn-checkbox, gn-select y el patrón searchbar incrustándolos fluidamente. - Permite adjuntar un bloque superior descriptivo y de acciones primarias que se comunican lógicamente con la tabla.

Componentes Estructurales

1. Bloque Superior (Label / Hint / Actions)

Se utiliza .table__header para albergar opcionalmente: - Un .table__title que da nombre a la tabla (vital conectarlo al aria-labelledby del contenedor o usar <caption>). - Un .table__hint descriptivo. - Un bloque .table__actions para acciones globales (p.ej. botones de "Exportar" o "Nuevo").

2. Tabla (Table, Thead, Tbody)

Toda tabla va envuelta en un .table__container que tiene overflow-x: auto nativo. Esto garantiza un comportamiento *Responsive* por defecto: si la tabla requiere más ancho del disponible en la pantalla, la tabla hará scroll horizontal interno sin romper el layout global de la página ni afectar a la barra de acciones superior.

3. Cabeceras (Table Header Cells)

Los <th> reciben la clase .table__th. Admiten varias integraciones: - Ordenación: Si la columna es ordenable, se debe marcar con el atributo nativo aria-sort="ascending|descending|none". Visualmente se incluye un <button class="table__sort-button"> dentro del th que alberga el icono de flechas, asegurando el acceso y uso exclusivo por teclado. - Filtros: Si Figma requiere un filtro bajo el nombre de columna, se inyecta en el div .table__filter. Este contenedor permite anidar sin esfuerzo tanto select como searchbar, adaptando sus anchuras.

4. Celdas de Datos (Table Cells)

Los <td> (.table__td) pueden soportar modificadores: - .table__td--fill: Aplica el fondo contrastado gris claro exigido en diseño. - .table--compact: Un modificador a aplicar en la cabecera .table que reduce el padding y altura a (35px) de todas sus celdas internas.

Alineación (Izquierda, Centro, Derecha)

El CSS expone modificadores explícitos (.table__th--left, .table__th--center, .table__th--right y sus respectivos en td) que resuelven tanto la alineación del texto (text-align) como la distribución Flex de su contenido (justify-content), garantizando que si una columna está a la derecha, también lo estén los botones de acción que contenga.

Consideraciones de Accesibilidad

- Todo el marcado descansa sobre semántica tabular real. No hay capas flotantes falsas hechas con divs. - El contenedor desplazable .table__container requiere tabindex="0" para garantizar que los usuarios que solo utilizan teclado puedan desplazar la tabla horizontalmente cuando aparece el scroll en móviles. - Los iconos de ordenación son *botones reales*, permitiendo anunciar su disponibilidad a lectores de pantalla y proporcionando focos claros interactivos. - Las interacciones de ordenación o filtrado requerirán JavaScript por parte de la aplicación final para manipular los datos; el patrón únicamente facilita los "anchors" visuales y semánticos.

<div class="table">
  <div class="table__container">
    <table class="table__element">
      <thead class="table__thead">
        <tr class="table__tr">
          <th class="table__th table__th--left" scope="col">
            <div class="table__th-content">Encabezado</div>
          </th>
          <th class="table__th table__th--left" scope="col">
            <div class="table__th-content">Encabezado</div>
          </th>
        </tr>
      </thead>
      <tbody class="table__tbody">
        <tr class="table__tr">
          <td class="table__td table__td--left">Dato 1</td>
          <td class="table__td table__td--left">Dato 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>