Did you know that you can dynamically render columns in #angular material table?
No, I am not talking about simply adding/removing columns on click of button, but a more robust solution like shown in below.
matColumnDef="boilingPoint">
mat-header-cell *matHeaderCellDef mat-sort-header="boilingPoint">
Boiling Point
mat-cell *matCellDef="let element">{{ element.boilingPoint }}
As show in code above, it’s upto consumer component which column it needs to render This technique involves mainly 2 things
1st is hostDirectives – to attach MatSort with component.
It is needed so that consumer can use mat-sort-header if it wants
@Component({
selector: 'table-dynamic-example',
standalone: true,
imports: [MatTableModule, MatSortModule],
hostDirectives: [MatSort],
})
2nd is contentChildren – to get projected columns
Due to internal structure of MatTable, we can’t directly use content projection here using ng-content, hence contentChildren is needed
private customCols = contentChildren(MatColumnDef);
And finally render them in afterViewInit hook using MatTable.addColumnDef
Also make sure to attach host MatSort with dataSource‘s sort. Otherwise sorting will not work
ngAfterViewInit() {
this.dataSource.sort = this.matSort;
this.customCols().forEach((col) => {
const columnName = col.name;
this.matTable()?.addColumnDef(col);
// need to wait until column is added
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
this.columnsToDisplay.push(columnName);
});
});
}
mat-table [dataSource]="dataSource" class="mat-elevation-z8">
@for (column of displayedColumns; track column) {
[matColumnDef]="column">
mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}
mat-cell *matCellDef="let element">{{ element[column] }}
}
mat-header-row *matHeaderRowDef="columnsToDisplay">
mat-row *matRowDef="let row; columns: columnsToDisplay;">
That’s it! Full code is available on stackblitz
