Angular 8 – Tablas con columnas dinámicas

Entrena tu MENTE

Columnas Dinámicas con Angular Material

Si estás trabajando con Angular, sabrás que facilita mucho el tema de trabajar con tablas. Sinembargo, cuando tienes una tabla que consta de muchas columnas puede tornarse un poco tedioso declarar en html cada una de las columnas que existen y asociarlas a su debida data.

Para este ejemplo estoy utilizando el código que nos brinda Angular Material en su página https://material.angular.io

Para poder hacer una llenado dinámico de columnas y celas utilizando Angular 8 y Material, debemos realizar tan solo 2 pasos:

Paso 1: Declarar las columnas en un Object

Primero debemos crear en nuestro archivo .ts del proyecto un objeto que contenga cada una de las columnas de la tabla. En este insertaremos varios Arrays() donde indicaremos un título para la columna y el nombre del campo tal como nos lo entrega la base de datos.

Para este ejemplo estoy utilizando un proyecto con código predefinido por eso tomaré las variables que este me presenta. Donde título es el nombre de la columna a mostrar y name es el campo como lo encontramos en la base de datos.

Para el archivo .html borraremos todas las columnas declaradas con <ng-container> excepto una que usaremos de ejemplo y para no estar reescribiendo código.

Archivo (.ts)


columnas=[
  {titulo: "Posición", name: "position"},
  {titulo: "Nombre", name: "name"},
  {titulo: "Peso", name: "weight"},
  {titulo: "Símbolo", name: "symbol"},
];

Archivo (.html)

Para el archivo html solo debe quedar esta columna que se encargará de llegar dinámicamente el resto. Si tienes una columna de seleccionar, asegúrate de no declararla en el objeto de columnas y escribirla aparte en la parte del html para que no tengas conflictos.

En la documentación de Material vas a encontrar propiedades adicionales que te permitirán añadir filtros, checkbox para seleccionar una o varias filas y mucho más. Te recomiendo revisar la documentación y seguir implementando código propio.

Déjame en los comentarios cualquier duda que tengas respecto a este proyecto y recuerda suscribirte a mi canal de Youtube.

Comments

comments

A %d blogueros les gusta esto: