Tabla de Expansión de Angular Material: Optimización y Problemas Comunes

La Tabla de Expansión de Angular Material es una herramienta poderosa para presentar datos en formato tabular, permitiendo que los usuarios expandan filas para visualizar detalles adicionales. Sin embargo, los desarrolladores a menudo se encuentran con ciertos problemas al utilizar esta funcionalidad, especialmente cuando se trata de la clasificación de datos. En esta publicación, exploraremos cómo implementar una tabla de expansión eficiente y abordaremos un problema común relacionado con la clasificación.

Funcionalidad de la Tabla de Expansión

Cuando se hace clic en el botón de expansión de una fila, se espera que se despliegue la información adicional. La configuración inicial de este comportamiento es clave. Aquí hay un desglose de cómo se maneja esto en un componente de Angular Material.

Configuración del Componente

El componente de la tabla de expansión debe gestionarse mediante propiedades como elementData, jsonFieldName y displayColName. Estas propiedades permiten que el componente maneje los datos de manera flexible.

@Input() elementData: any[] = []; // Datos a mostrar
@Input() jsonFieldName: string[] = []; // Campos JSON a mapear
@Input() displayColName: string[] = []; // Nombres de columnas para visualización

La funcionalidad de expansión se maneja a través de un botón que alterna el estado de la variable isCollapsed.

<button mat-icon-button (click)="isCollapsed = !isCollapsed">
  {{ isCollapsed ? 'Colapsar' : 'Expandir' }}
</button>

Problema Común: Clasificación y Estado de Expansión

El Problema

Al clasificar los datos haciendo clic en la cabecera de la tabla, es común que el estado de expansión se vuelva inconsistente. Esto ocurre porque al clasificar los datos, las filas pueden reorganizarse, pero el estado de expansión no está vinculado a un mecanismo que rastree qué filas estaban expandidas en primer lugar.

Solución Esperada

El requerimiento es que el estado de expansión no cambie cuando se empieza a clasificar. Para lograr esto, es importante almacenar el estado de cada fila antes de que se aplique la clasificación.

Implementación de la Solución

Para mantener el estado correctamente, es recomendable añadir un objeto que rastree cuál fila está expandida. Esto puede lograrse mediante un array o un objeto que almacene el estado de expansión de cada fila:

expandedElement: any | null; // Almacena el elemento expandido actualmente

La función de clasificación debe ser ajustada para preservar este estado:

sortData(sort: Sort) {
  const data = this.elementData.slice(); // Copia de los datos originales

  if (!sort.active || sort.direction === '') {
    this.paginatedItems = data;
    return;
  }

  this.paginatedItems = data.sort((a, b) => {
    const isAsc = sort.direction === 'asc';
    const key = sort.active as keyof typeof a;

    return this.compare(a[key], b[key], isAsc);
  });

  // Restaurar el estado expandido
  this.paginatedItems.forEach(item => {
    if (item === this.expandedElement) {
      this.expandedElement = item; // Mantener el elemento expandido
    }
  });
}

Conclusión

La Tabla de Expansión de Angular Material es una herramienta útil, pero como hemos visto, puede presentar desafíos, especialmente en la gestión del estado de expansión al clasificar los datos. A través de un manejo cuidadoso de los datos y una implementación adecuada de la clasificación, se puede crear una experiencia de usuario fluida y coherente.

Para más detalles sobre la Tabla de Expansión, puedes visitar la página de Github o revisar el código fuente.