Having a header row for each row in Angular Material Table

Question

As the title (may) suggest. I am trying to make an Angular Material table which has a header for every other row. See a basic sketch down below.

The only way I would have been able to this the best way is using seperate tables, this would not be ideal because the starting points of the cells would be in different places resulting in a messy looking table.

EDIT (code sample from proof of concept):

.component.html

<table mat-table [dataSource]="consolidation" class="container">
        <ng-container matColumnDef="parameter">
            <th mat-header-cell *matHeaderCellDef>Consolidation Parameter</th>
            <td mat-cell *matCellDef="let element" [attr.rowspawn]="2"> {{element.parameter}} </td>
        </ng-container>
        <ng-container matColumnDef="value">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element"> {{element.unit}} <br> {{element.value}} </td>
        </ng-container>
        <ng-container matColumnDef="value2">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element"> {{element.unit2}} <br> {{element.value2}} </td>
        </ng-container>
        <ng-container matColumnDef="value3">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element"> {{element.unit3}} <br> {{element.value3}} </td>
        </ng-container>
        <ng-container matColumnDef="value4">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element"> {{element.unit4}} <br> {{element.value4}} </td>
        </ng-container>
        <ng-container matColumnDef="value5">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element"> {{element.unit5}} <br> {{element.value5}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['parameter', 'value', 'value2', 'value3', 'value4', 'value5']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['parameter', 'value', 'value2', 'value3', 'value4', 'value5'];"></tr>
</table>

Which results in something that looks like this. It's close. But everything is in one single cell while I would like to split those two up. Had to cross out the numbers since it may or may not be confidential.

Data source consist of an array with objects made out of parameter and value unit pairs. Where the unit makes up the "header cell"

Answer 1

You could divide the mat-cell into further smaller blocks to achieve what you are trying to with more control over the styling. Something like this:

<ng-container matColumnDef="value">
    <mat-header-cell *matHeaderCellDef>
    </mat-header-cell>
    <mat-cell *matCellDef="let element">
       <div class="d-flex flex-column text-center w-100">
           <div class="font-weight-bold unit">
              RR (trap)[-]
           </div>
           <div class="value">
              5.25
           </div>
       </div>
    </mat-cell>
</ng-container>

Using flexbox you can create your layout of the cell always to include one cell(div) of the unit and the other cell(div) of the value.

Some styling just to add borders around the cells:

.value {
    border-top-width: 0 !important;
    border: 1px solid;
    padding: 3px;
}

.unit {
    border: 1px solid rgb(82, 79, 79);
    padding: 3px;
}