Angular 5 - Material 2 - matHeaderRowDef using complex object

Viewed 1280

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>
0 Answers
Related