title: Angular Material data Table with dynamic rows
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/tGgeP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tGgeP.jpg" alt="enter image description here"></a></p>
  
  <p><a href="http://www.devglan.com/angular/angular-data-table-example" rel="nofollow noreferrer">http://www.devglan.com/angular/angular-data-table-example</a></p>
  
  <p>Sample Json for cross reference.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>constELEMENT_DATA: Element[
    
  ]=[
    {
      position: 1,
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@gmail.com'favoriteColor: 'red',
      favorite: {
        favoriteFood: [
          'Idly',
          'Vada'
        ],
        favoriteCar: 'Mercendes Benz',
        favoriteMovie: 'JamesBond movie',
        favoritePlace: 'HillStation'
      }
    },
    {
      position: 1,
      firstName: 'Mike',
      lastName: 'Hussey',
      email: 'mike@gmail.com',
      favorite: {
        favoriteFood: 'Dosa',
        favoriteMovie: 'RajiniKandth movie'
      }
    },
    {
      position: 1,
      firstName: 'Ricky',
      lastName: 'Hans',
      email: 'ricky@gmail.com',
      favorite: {
        favoriteFood: 'Chappathi',
        favoriteCar: 'BMW'
      }
    },
    {
      position: 1,
      firstName: 'Martin',
      lastName: 'Kos',
      email: 'martin@gmail.com'favorite: {
        
      }
    },
    {
      position: 1,
      firstName: 'Tom',
      lastName: 'Paisa',
      email: 'tom@gmail.com',
      favorite: {
        favoriteCar: 'Ford'
      }
    }
  ];</code></pre>
  </div>
  </div>
  </p>
  
  <p>Html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-table #table [dataSource]="dataSource"&gt;
  
      &lt;ng-container matColumnDef="position"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; No. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;  &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="firstName"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; First Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;  &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="lastName"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Last Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;  &lt;mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="email"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Email &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;  &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>