Skip to main content

Tablas Sticky y Scroll Global (Design System Alpura)

Esta guía documenta la arquitectura de clases de utilidad globales Cero-Boilerplate (Zero Boilerplate) integradas en el sistema de diseño del tema global de Alpura (_general.scss).

Con estas clases, cualquier desarrollador puede implementar encabezados fijos (Sticky Header), columnas fijas (Sticky Columns) y filas resaltadas con error (.row-error) en tablas de Angular Material sin necesidad de escribir código CSS adicional en las hojas de estilo del componente (.scss).

📌 Resumen de Clases de Utilidad​

Clase CSSElemento HTML recomendadoDescripción
table-container
table-scroll-container		<div class="table-container">Contenedor principal que provee bordes redondeados, borde sutil y scroll interno (max-height: 480px; overflow: auto;).
sticky-header<table mat-table class="sticky-header">
o <tr mat-header-row class="sticky-header">		Fija los encabezados de la tabla en la parte superior durante el scroll vertical (position: sticky; top: 0; z-index: 10;).
sticky-column-right
sticky-actions		<th class="sticky-column-right">
<td class="sticky-column-right">		Fija la columna en el borde derecho durante el scroll horizontal (position: sticky; right: 0; z-index: 5;). Incluye una sombra sutil de separación.
sticky-column-left<th class="sticky-column-left">
<td class="sticky-column-left">		Fija la columna en el borde izquierdo durante el scroll horizontal (position: sticky; left: 0; z-index: 5;). Incluye sombra sutil derecha.
row-error<tr mat-row class="row-error">Aplica fondo rojo suave (var(--alp-state-error-soft)) a todas las celdas de la fila (incluyendo celdas sticky) y añade un borde izquierdo de 4px rojo (var(--alp-state-error)).

💡 Ejemplos Prácticos de Código HTML​

Ejemplo 1: Tabla con Encabezado Fijo (Sticky Header)​

Envuelve la tabla en un <div class="table-container"> y añade la clase sticky-header a la fila del encabezado <tr mat-header-row>:

<div class="table-container">
  <table mat-table [dataSource]="listado">
    <!-- Columna ID -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let row">{{ row.id }}</td>
    </ng-container>

    <!-- Columna Nombre -->
    <ng-container matColumnDef="nombre">
      <th mat-header-cell *matHeaderCellDef>Nombre</th>
      <td mat-cell *matCellDef="let row">{{ row.nombre }}</td>
    </ng-container>

    <!-- Filas de la Tabla -->
    <tr mat-header-row *matHeaderRowDef="['id', 'nombre']" class="sticky-header"></tr>
    <tr mat-row *matRowDef="let row; columns: ['id', 'nombre']"></tr>
  </table>
</div>

Ejemplo 2: Encabezado Fijo y Columna de Acciones Fija a la Derecha​

Añade class="sticky-column-right" tanto al <th mat-header-cell> como al <td mat-cell> de la columna de acciones:

<div class="table-container">
  <table mat-table [dataSource]="ejecuciones">
    
    <!-- Columna Código -->
    <ng-container matColumnDef="codigo">
      <th mat-header-cell *matHeaderCellDef>Código</th>
      <td mat-cell *matCellDef="let row">{{ row.codigo }}</td>
    </ng-container>

    <!-- Columna Estado -->
    <ng-container matColumnDef="estado">
      <th mat-header-cell *matHeaderCellDef>Estado</th>
      <td mat-cell *matCellDef="let row">{{ row.estado }}</td>
    </ng-container>

    <!-- Columna Acciones Fija (Sticky Right) -->
    <ng-container matColumnDef="acciones">
      <th mat-header-cell *matHeaderCellDef class="sticky-column-right">Acciones</th>
      <td mat-cell *matCellDef="let row" class="sticky-column-right">
        <button mat-icon-button (click)="onVerDetalle(row)">
          <mat-icon>visibility</mat-icon>
        </button>
      </td>
    </ng-container>

    <!-- Filas de la Tabla -->
    <tr mat-header-row *matHeaderRowDef="['codigo', 'estado', 'acciones']" class="sticky-header"></tr>
    <tr mat-row *matRowDef="let row; columns: ['codigo', 'estado', 'acciones']"></tr>
  </table>
</div>

Ejemplo 3: Fila con Estado de Error (.row-error) y Columna Fija​

Aplica la clase row-error condicionalmente en la fila de datos <tr mat-row>. Todas las celdas, incluyendo la celda fija de acciones, tomarán el color de fondo rojo suave sin parches blancos:

<tr
  mat-row
  *matRowDef="let row; columns: displayedColumns"
  [class.row-error]="row.tieneError"
></tr>

🛠️ Reglas Técnicas Integradas en el Tema​

Las clases globales en _general.scss y src/styles.scss gestionan automáticamente las siguientes propiedades CSS:

  1. Z-Index Jerárquico:

    • z-index: 10: Encabezados de tabla (.sticky-header).
    • z-index: 5: Celdas del cuerpo fijas (.sticky-column-right / .sticky-column-left).
    • z-index: 11: Intersección de esquinas superiores (th.sticky-column-right / th.sticky-column-left) para evitar solapamientos durante el scroll diagonal.

  2. Opacidad y Colores de Fondo:

    • background-color: var(--alp-color-gris-claro-3) en celdas de encabezado.
    • background-color: var(--alp-bg, #ffffff) en celdas del cuerpo.
    • background-color: var(--alp-state-error-soft) en filas y celdas sticky con estado .row-error.

  3. Separación Visual por Sombra (Box Shadow):

    • Sombra sutil izquierda en .sticky-column-right (box-shadow: -3px 0 6px rgba(0, 0, 0, 0.06)).
    • Sombra sutil derecha en .sticky-column-left (box-shadow: 3px 0 6px rgba(0, 0, 0, 0.06)).