How to add two header to the table?

How to add one more heading which should be located after after the name of the columns but before the data array? In general, I want to do something like this.

I tried to add just an empty header but it does not appear:

<th mat-header-cell *matHeaderCellDef></th>

html:

<table mat-table [dataSource]="dataSource" matSort matSortDisableClear matSortActive="NAME"
  matSortDirection="asc">
  <ng-container [matColumnDef]="column.value" *ngFor="let column of allCols;">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="load()">
      {{column.displayName}}
    </th>
    <td mat-cell *matCellDef="let row">
      {{row[column.lowercaseValue]}}
    </td>
  </ng-container>
  <ng-container matColumnDef="button">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <button mat-icon-button color="primary" (click)="view(row)" matTooltip="Delete">
        <mat-icon>delete_outline</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns.concat(['button'])"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns.concat(['button']);"></tr>
</table>

Source: New feed
Source Url How to add two header to the table?