I am trying to build a dynamic material table. My 'SourceColumns' object consists of a number of elements, including Header, DataItem, Format, etc. How do I select this properly in matHeaderRowDef AND matRowDef. I can't seem to figure this out.
I do understand the documentation calls for a string array. And yes, it does work when I do that. I was hoping there is a way to call it with a complex object. Otherwise, I have to convert my complex object into a string array, which seems like extra work that is not necessary.
Thanks in advance for any help.
<mat-table #gridTable [dataSource]="dataSource" matSort>
<ng-container *ngFor="let column of SourceColumns">
<ng-container matColumnDef="{{column.DataItem }}">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.Header }}</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row[column.DataItem] | format : column.Format }}</mat-cell>
</ng-container>
</ng-container>
<mat-header-row *matHeaderRowDef="SourceColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: SourceColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="resultsLength" [pageSize]="30" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>