Angular Material data Table with dynamic rows

Question

I am using Angular 5 and Angular Material data table for constuction of the data. I'm referring an example in the below site. In this consider I need to include the dynamic data to each row as in the screenshot where 'favorite' is the column header.

http://www.devglan.com/angular/angular-data-table-example

Sample Json for cross reference.

constELEMENT_DATA: Element[
  
]=[
  {
    position: 1,
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]'favoriteColor: 'red',
    favorite: {
      favoriteFood: [
        'Idly',
        'Vada'
      ],
      favoriteCar: 'Mercendes Benz',
      favoriteMovie: 'JamesBond movie',
      favoritePlace: 'HillStation'
    }
  },
  {
    position: 1,
    firstName: 'Mike',
    lastName: 'Hussey',
    email: '[email protected]',
    favorite: {
      favoriteFood: 'Dosa',
      favoriteMovie: 'RajiniKandth movie'
    }
  },
  {
    position: 1,
    firstName: 'Ricky',
    lastName: 'Hans',
    email: '[email protected]',
    favorite: {
      favoriteFood: 'Chappathi',
      favoriteCar: 'BMW'
    }
  },
  {
    position: 1,
    firstName: 'Martin',
    lastName: 'Kos',
    email: '[email protected]'favorite: {
      
    }
  },
  {
    position: 1,
    firstName: 'Tom',
    lastName: 'Paisa',
    email: '[email protected]',
    favorite: {
      favoriteCar: 'Ford'
    }
  }
];

Html:

<mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  <mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

My mistake I was unable to capture the output properly in the screenshot. If you consider firstname John as first row, Food: Idly, Vada will appear in that row, but next row will have Car: Mercendes Benz, next row will have movie JamesBond movie and next row place: HillStation. where as all other columns belonging to these rows will be blank. Next iteration will start for firstname Ricky in similar fashion. In the Json consider all these favorite items are under favorite.

Solution

Simply use a loop in your HTML.

Stackblitz

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
      <mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

Comments

[Ferus7]

what is your doubt?

[Sundar]

My doubt is how to display the dynamic (inconsistent) favorite content using angular material data table? I am providing the html above.

[Sundar]

In this example, all rows are have same elements. But if you refer my screenshot above where it has favorite column which has unequal number of cells. And the requirement is these would be listed as individual rows with other columns left blank. Could you share your inputs reformatting the code matching the example? devglan.com/angular/angular-data-table-example

[Admin]

Element is the name of the row variable. If you only opened the stackblitz, you would have seen that it works. I don't have access to screenshots (corporate proxy), but if you want "unequal number of cells", simply let some cells empty.

[Sundar]

Thanks I will check it out.

[Sundar]

Could you review the reformatted json and provide your answer now.

[Admin]

Flatten your arrays.

[digish a d]

What If I want custom column header?

[Admin]

@digishad you provide it as HTML not as text only.