title: How to use colspan and ngFor in Angular material 6 table?
body: <p>I'm using Angular Material to render the table.</p>
  
  <p><a href="https://i.stack.imgur.com/uwYG2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uwYG2.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <p></p>
  
  <pre><code>&lt;ng-container matColumnDef="type"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Workout type &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let workout"&gt; {{workout.type}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="set1"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Weight x Reps &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let workoutData"&gt; {{workoutData.workoutSessions[0].sets[0].weight}} x {{workoutData.workoutSessions[0].sets[0].repetitions}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="set2"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Weight x Reps &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let workoutData"&gt; {{workoutData.workoutSessions[0].sets[1].weight}} x {{workoutData.workoutSessions[0].sets[1].repetitions}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="set3"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Weight x Reps &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let workoutData"&gt; {{workoutData.workoutSessions[0].sets[2].weight}} x {{workoutData.workoutSessions[0].sets[2].repetitions}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="set4"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Weight x Reps &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let workoutData"&gt; {{workoutData.workoutSessions[0].sets[3].weight}} x {{workoutData.workoutSessions[0].sets[3].repetitions}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="set5"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Weight x Reps &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let workoutData"&gt; {{workoutData.workoutSessions[0].sets[4].weight}} x {{workoutData.workoutSessions[0].sets[4].repetitions}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;tr mat-header-row *matHeaderRowDef="workoutTableColumns"&gt;&lt;/tr&gt;
  &lt;tr mat-row *matRowDef="let row; columns: workoutTableColumns;"&gt;&lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have 2 questions about this:</p>
  
  <p>1) Is it possible to iterate thru an array using *ngFor in this situation? Now my code looks too messy, want to clean it. </p>
  
  <p>2) Is it possible to use colspan? I didn't find any information that this issue is solved (issue: <a href="https://github.com/angular/material2/issues/5888" rel="nofollow noreferrer">https://github.com/angular/material2/issues/5888</a> ). </p>
  
  <p>So, the main quesion is: Is it better to use Angular material table or regular one in this particular situation?</p>