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"

Well a header is a header and not a cell. However, if it is just about the style, you can obviously make a cell look like a header. — MoxxiManagarm
– MoxxiManagarm, Commented Oct 17, 2022 at 10:51
Is something I also considered. But it will result in a very messy data source I think. My datasource basically consist of field, value and unit. Where field and unit would make up the header and value the cell below it. Is there a way I can differentiate between which cell is used, Maybe with the help of ng-template and ngIf? — Wessel van Leeuwen
– Wessel van Leeuwen, Commented Oct 17, 2022 at 10:55
You maybe should show your current code in order to get further help. — MoxxiManagarm
– MoxxiManagarm, Commented Oct 17, 2022 at 11:04
I have added the code I have used to make a Proof of Concept. It's close to what I want. But not quite there yet but can't figure out how to tackle this problem without using a really hacky solution (having value and unit keys and checking if the unit key has a value, if so it is a header. Which would result in alot of empty unit keys). — Wessel van Leeuwen
– Wessel van Leeuwen, Commented Oct 17, 2022 at 11:28
just style it like this: <td mat-cell *matCellDef="let element"> <span style="font-size: 0.9em; font-weight: bold; color: #0000008a;">{{element.unit}}<span> <br> {{element.value}} </td> — Zerotwelve
– Zerotwelve, Commented Oct 17, 2022 at 11:32

HassanMoin · Accepted Answer · 2022-10-19 09:57:08Z

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;
}

answered Oct 19, 2022 at 9:57

HassanMoin

2,2341 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wessel van Leeuwen Over a year ago

About the same as mentioned in the comments above. But I still appreciate your answer!

Collectives™ on Stack Overflow

Having a header row for each row in Angular Material Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related