Split a column of Angular Material Table - html

Question

I'm trying to create a custom Angular Material Table, more exactly, to split one column in 5 columns like here:
The first row with No, Name, Weight and Symbol (with the 5 columns) represent the header of the table. How can I split the Symbol column in 5 columns?
My code is that one from Angular Material:
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef>Weight</th>
<td mat-cell *matCellDef="let element">{{ element.weight }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef>Symbol</th>
<td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
</div>

Answer 1

I had to do a similar thing this week and I put together a Stackblitz to play around and have something working that might help?
https://stackblitz.com/edit/generic-mat-table-kji9ey?file=src%2Fapp%2Fapp.component.html
The key seems to be to configure the two header rows with colspan and rowspan attributes for the resultant columns
This answer was useful too:
https://stackoverflow.com/a/59626423/2928193