Angular Material Html table with dynamic columns.

[@facundobertoli6514]

Genio total, gracias por la explicacion

[@ngtutos-4U]

Que bueno que te haya servido. Gracias a ti por el feedback. 👍

[@EjemploTecno]

Este video es oro puro 🤑, aca les dejo un dato, si lo que deseas es ocultar y mostrar una columna sin eliminarla y luego agregarla al final, pues un pequeño cambio, en ves de editar displayedColumns edita tableColumns, aca el codigo del metodo setShowcolum setShowcolum (id: any){ const column = this.tableColumns.find(col => col.id === id); if (column) { column.isShow = !column.isShow; this.displayedColumns = this.tableColumns.filter(col => col.isShow).map(col => col.id); }} Muchas gracias por el aporte, aca un granito de arena igual

[@ngtutos-4U]

Excelente @EjemploTecno, gracias por el comment y gracias por el aporte.

[@diegoBike31]

amigo, y para el caso de la busqueda como sería ? o ya con agregar las columnas te buscan ?

[@EjemploTecno]

@@diegoBike31 de busqueda a que te refieres diego ?

[@diegoBike31]

@@EjemploTecno el mat-table trae para hacer un filtrado con la data... mi consulta era si escogo q columnas quiero mostrar y en el filter escribo el texto... llamo al servicio y q me pinte la tabla con las columnas antes seleccionadas

[@ngtutos-4U]

Gracias por el comentario y más gracias aún por el dato adicional. Excelente aporte.👍

[@diegoBike31]

amigo, y para el caso de la busqueda como sería ? o ya con agregar las columnas te buscan ?

[@ngtutos-4U]

Hola Diego, Si estás utilizando MatTableDataSource, al agregar y/o quitar columnas debería seguir funcionando la búsqueda. Simplemente proporcionas la cadena de filtro a MatTableDataSource. La fuente de datos reducirá los datos de cada fila a una forma serializada y filtrará la fila si no contiene la cadena de filtro. De forma predeterminada, la función de reducción de datos de fila concatenará todos los valores del objeto y los convertirá a minúsculas. Por ejemplo, el objeto de datos {id: 123, nombre: 'Sr. Rivera', favoriteColor: 'azul'} quedará reducido a la cadena '123sr. riveraazul'. Si la cadena de filtro fuera azul, se consideraría una coincidencia porque está contenida en la cadena reducida y la fila se mostraría en la tabla. Por lo tanto, la función filter que ya tienes, debería seguir funcionando cuando apliques el filtro this.dataSource.filter = filterValue.trim().toLowerCase(); siendo filterValue el valor recogido por el input que tienes para realizar la búsqueda.