How colSpan and row Span added to material table Header Angular 7?

Question

I'm trying to add rowSpan and colSpan in Angular material Table header. Can anyone help me to achieve it.

Below is the Attached Header I want to get using material table

Answer 1

I have the sample task like you. I just easy to display none with second header.

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

 <!-- first stage header -->
  <ng-container matColumnDef="No">
    <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No</th>
  </ng-container>

Here is my result

You can follow my link to know more: StackBlitz