How do you add a custom column in a mat table.
Such as adding an edit column containing an edit icon with a click event containing the id of the current element.
<div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- Position Column --> <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> </ng-container> <!-- Weight Column --> <ng-container matColumnDef="weight"> <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell> </ng-container> <!-- Color Column --> <ng-container matColumnDef="symbol"> <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
MatCellDef extends CdkCellDefCell definition for the mat-table. Captures the template of a column's data row cell as well as cell-specific properties.
On your TableBasicExample.ts add
export class TableBasicExample { displayedColumns = ['position', 'name', 'weight', 'symbol', 'customColumn1']; dataSource = new ExampleDataSource(); }
And in your html file add the column:
<ng-container matColumnDef="customColumn1"> <mat-header-cell *matHeaderCellDef> Custom Title</mat-header-cell> <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell> </ng-container>
Here is the one way to do it. It might help someone down the road.
table.html
<ng-container matColumnDef="action"> <th mat-header-cell *matHeaderCellDef> Action </th> <td mat-cell *matCellDef> <ng-container *ngTemplateOutlet="templateRef"></ng-container> </td> </ng-container>
table.component
@Input() templateRef: TemplateRef<any>;
table-parent.html
<app-data-table [dataSource]="dataSource" [templateRef]="template"> <ng-template #template> <button mat-icon-button color="warn"> <mat-icon>delete</mat-icon> </button> <button mat-icon-button color="primary"> <mat-icon>edit</mat-icon> </button> </ng-template> </app-data-table>
Hope that saves someone couple hours of search :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With