¿Cómo editar el nombre de columnas , además mostrar y ocultar columnas en una tabla usando material angular?

Buenas tardes, he estado desarrollando una funcionalidad que no traen las tablas de material angular por defecto, un cliente me solicitó poder cambiarle el nombre a las columnas de la tabla, así como poder organizarlas de un lado al otro y poder mostrarlas y ocultarlas dependiendo de sus necesidades.

He creado una tabla usando el material design para angular ,  así como funcionalidades como el drag and drop del CDK.

El proceso de creación  ha sido el siguiente:
1. La creación de un tabla sencilla de acuerdo a la documentación.

2. Para permitir cambiar de posición las columnas he usado el drag and drop que viene en el CDK de Material Angular.

3. Para cambiar el nombre de las columnas he utilizado un mat-dialog de angular material.

4. Para mostrar u ocultar columnas se manipuló el campo displayColumns de la tabla

Esto es a groso modo lo que he realizado para editar ciertos componentes de las tablas de material angular.

Puedes encontrar el código fuente y usarlo en tus proyectos aquí

hasta la próxima!

Leave a reply:

Your email address will not be published.

Site Footer