Angular + Material: cómo agregar columnas personalizadas en una tabla (Mat-Table)

Nuestro equipo de trabajo ha estado mucho tiempo buscando la respuesta a tu búsqueda, te regalamos la soluciones por esto deseamos servirte de mucha apoyo.

Solución:

En su TableBasicExample.ts agregar

export class TableBasicExample 
  displayedColumns = ['position', 'name', 'weight', 'symbol', 'customColumn1'];
  dataSource = new ExampleDataSource();

Y en su archivo html agregue la columna:

   Custom Title
   element.position 

Esta es la única forma de hacerlo. Podría ayudar a alguien en el camino.

tabla.html

    
        Action 
       
           
       
   

tabla.componente

 @Input() templateRef: TemplateRef;

tabla-padre.html

   
      
         delete
      
      
         edit
      
   

Espero que eso le ahorre a alguien un par de horas de búsqueda 🙂

Lo que está tratando de lograr también se hace en este paquete angular4-material-table, que agrega alguna estructura para permitir la inserción, edición y eliminación de filas. Tiene un ejemplo para agregar columnas de acciones personalizadas en este plunkr.

Puede definir una columna con los botones/acciones que desee:

     
         column 1 title 
        
            
        
     
     
         column 2 title 
        
            
        
    
    
        
            Create new
        
        
            Edit
            Cancel
        
    
    
    
    
    

Debe incluir la columna en las columnas mostradas string array:

displayedColumns = ['column1', 'column2', 'actionsColumn']; 

Te mostramos reseñas y calificaciones

Agradecemos que quieras añadir valor a nuestro contenido informacional dando tu veteranía en las interpretaciones.

---

---

Utiliza Nuestro Buscador