1

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.

enter image description here

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" enter image description here

Wessel van leeuwen
  • 48
  • 7
  • 1
    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 Oct 17 '22 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 Oct 17 '22 at 10:55
  • You maybe should show your current code in order to get further help. – MoxxiManagarm Oct 17 '22 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 Oct 17 '22 at 11:28
  • just style it like this: ` {{element.unit}}
    {{element.value}}     `     – Zerotwelve Oct 17 '22 at 11:32
  • Alright I will try that first thing in the morning once I get back. – Wessel van leeuwen Oct 17 '22 at 12:51

1 Answers1

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;
}
HassanMoin
  • 2,024
  • 1
  • 6
  • 16