title: How to add mutiple header rows using angular material table
body: <p>
      
         Parameter 1: Time Period
         {{element.value}} 
      
      
         Parameter 2: Gender
         {{element.gender}} 
      </p>
  
  <pre><code>&lt;ng-container matColumnDef="column3"&gt;
    &lt;mat-header-cell *matHeaderCellDef rowspan="2"&gt; Patients with Base Condition &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column4"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Patients with Outcome&lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column5"&gt;
    &lt;mat-header-cell *matHeaderCellDef class="ColumnDivider"&gt; Prevelance &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element" class="ColumnDivider"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column6"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Patients at Risk &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column7"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; New Patients with Outcome &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column8"&gt;
    &lt;mat-header-cell *matHeaderCellDef class="ColumnDivider"&gt; Incidence Proportion &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element" class="ColumnDivider"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column8"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Total Patient Years at Risk &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column10"&gt;
    &lt;mat-header-cell *matHeaderCellDef class="myMarginLeft"&gt; New Patients with Outcome &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element" class="myMarginLeft"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="column11"&gt;
    &lt;mat-header-cell *matHeaderCellDef &gt;Incidence Rate &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.value}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container *matHeaderRowDef="displayedColumns"&gt;
    &lt;div class="mat-header-row header-group-row"&gt;
      &lt;div class="mat-header-cell" role="columnheader"&gt;&lt;/div&gt;
      &lt;div class="mat-header-cell" role="columnheader"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;mat-header-row&gt;&lt;/mat-header-row&gt;
  &lt;/ng-container&gt;
  &lt;mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)" [ngClass]="{'highlight': selectedRowIndex == row.inp_analysis_name}"&gt;&lt;/mat-row&gt;
  </code></pre>
  
  <p></p>
  
  <p>Multiple columns with a single column.</p>
  
  <p>column1|column2|Column3|Column4|Column5|Column6|Column7|Column8
          Column2.1|Column2.2|Column2.3   Column6.1|Column6.2</p>