Custom cell templates

[leawp]

As the title suggests, it would be possible to put whatever content inside a cell. It is related to the customColumnOrder option if there was an option to add or define columns then it would be possible to create an "Action" column with buttons, or a checkbox column to act upon rows, select them, etc...

mat-table component from material.angular solves it as follows:

<table mat-table [dataSource]="someDataSource">
  <ng-container matColumnDef="actions"> // actions represent column name
      <td mat-cell *matCellDef="let element"> 
          <button (click)="doSomething(element.id)">DELETE</button>
      </td> 
      ...
  </ng-container>
  ...
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

[Vijeinath]

I tried to inject a button in a cell also in order to create an "Edit/Delete" column but unfortunately it did not render as an html element. Is this somehow possible? Is this planned for the future?

[mlrv]

Hi @Vijeinath, this is currently not supported but it definitely something that I've been thinking about. It should be relatively straightforward to implement, so any contribution towards it is welcome :)

[Stromwerk]

I also would really like this feature. I think I'll look into creating a PR.

Edit: After some though, maybe it would be good to create custom column definitions, so we can not only add custom templates for the cells, but also set some properties for each column. I'm suggesting this, because I need some more complex names in the column names, and I think it would be better this way, instead of having weird names for object properties.

[nishad5089]

you can push new item into displayedColumns array under ngOnInit method.

  </ng-container>
</div>
<!-- <ng-container matColumnDef="action"> 
  <td mat-cell *matCellDef="let element"> 
      <button>DELETE</button>
  </td> 
</ng-container> -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row [ngClass]="{'highlight-on-hover': options.highlightRowOnHover}" *matRowDef="let row; columns: displayedColumns;">

{{options.capitalisedHeader ? (column | translate) : column | translate}}	View	{{element.isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}} {{element.value[column]}} {{element.value[column]}}