Angular Material mat table merged rows

Question

I'm struggling with the following. I want to change my basic html table to a mat-table. But I can not find a way to merge the two rows on the first two columns.

I've got the mat-table on top and the basic html table on the bottom:

[![enter image description here][1]][1]

What I want in my mat table is the following: for each reference + invoice I want two rows, one with invoiced and one with expected, just like in my bottom table.

My basic html table is as following:

<table>
  <thead>
    <th *ngFor= "let column of headersContainers">
      {{column}}
    </th>
  </thead>

  <tbody *ngFor = "let container of completeContainers">
    <th rowspan = "2" >{{container.containerReference}}</th>
    <th rowspan = "2" >{{container.invoiceReference}}</th>
      <td>Invoiced</td>
      <td>{{container.InvoicedCosts.OFC | currency :'€ '}}</td>
      <td>{{container.InvoicedCosts.THC | currency :'€ '}}</td>
      <td>{{container.InvoicedCosts.BAF | currency :'€ '}}</td>
      <td>{{container.InvoicedCosts.Total | currency :'€ '}}</td>
    <tr> 
      <td>Expected</td> 
      <td>{{container.ExpectedCosts.OFC | currency :'€ '}}</td>
      <td>{{container.ExpectedCosts.THC | currency :'€ '}}</td>
      <td>{{container.ExpectedCosts.BAF | currency :'€ '}}</td>
      <td>{{container.ExpectedCosts.Total | currency :'€ '}}</td>
    </tr>
  </tbody>
</table>

While my mat-table html is as following:

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="containerReference">
    <th mat-header-cell *matHeaderCellDef [rowSpan]="2"> Reference </th>
    <td mat-cell *matCellDef="let container"> {{container.containerReference}} </td>
  </ng-container>

  <ng-container matColumnDef="InvoiceReference">
    <th mat-header-cell *matHeaderCellDef [rowSpan]="2"> Invoice </th>
    <td mat-cell *matCellDef="let container"> {{container.invoiceReference}} </td>
  </ng-container>

  <ng-container matColumnDef="InvoicedOrExpected">
    <th mat-header-cell *matHeaderCellDef> Invoiced or expected </th>
    <td mat-cell *matCellDef="let container"> Invoiced </td>
  </ng-container>

  <ng-container matColumnDef="OHC">
    <th mat-header-cell *matHeaderCellDef> Ocean handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.OHC}} </td>
  </ng-container>

  <ng-container matColumnDef="THC">
    <th mat-header-cell *matHeaderCellDef> Terminal handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.THC}} </td>
  </ng-container>

  <ng-container matColumnDef="BAF">
    <th mat-header-cell *matHeaderCellDef> Bunker adjustment factor </th>
    <td mat-cell *matCellDef="let container"> {{container.BAF}} </td>
  </ng-container>

  <ng-container matColumnDef="Total">
    <th mat-header-cell *matHeaderCellDef> Total </th>
    <td mat-cell *matCellDef="let container"> {{container.Total}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="headersContainers"></tr>
  <tr mat-row *matRowDef="let row; columns: headersContainers;"> </tr>

</table>

My dataSource looks as follows:

[
    {
        "containerReference": "20DV HLXU1234567",
        "invoiceReference": "109554 (20000678)",
        "InvoicedCosts": {
            "OFC": 1023.0,
            "THC": 100.0,
            "BAF": 67.0,
            "Total": 1190.0
        },
        "ExpectedCosts": {
            "OFC": 465.0,
            "THC": 205.0,
            "BAF": 285.0,
            "Total": 955.0
        }
    },
    {
        "containerReference": "20DV HLXU2234567",
        "invoiceReference": "109554 (20000678)",
        "InvoicedCosts": {
            "OFC": 3445.0,
            "THC": 65.0,
            "BAF": 77.0,
            "Total": 3587.0
        },
        "ExpectedCosts": {
            "OFC": 465.0,
            "THC": 205.0,
            "BAF": 285.0,
            "Total": 955.0
        }
    }
]

Quick note that I can change the dataSource setup since I'm using ArrayNode in java.

EDIT:

I've changed the the HTML file to this:

<h1>Costs per container</h1>
<mat-checkbox (change)="switchEvent($event)" labelPosition ="before">Show correctly invoiced containers</mat-checkbox>

<table mat-table [dataSource]="dataSource">

  <!--Container reference-->
  <ng-container matColumnDef="containerReference">
    <th mat-header-cell *matHeaderCellDef> Reference </th>
    <td mat-cell *matCellDef="let container"> {{container.containerReference}} </td>
  </ng-container>

  <!--Invoice reference-->
  <ng-container matColumnDef="invoiceReference">
    <th mat-header-cell *matHeaderCellDef> Invoice </th>
    <td mat-cell *matCellDef="let container"> {{container.invoiceReference}} </td>
  </ng-container>

  <!--Invoiced columns-->
  <ng-container matColumnDef="invoicedOHC">
    <th mat-header-cell *matHeaderCellDef> Ocean handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.OFC}} </td>
  </ng-container>

  <ng-container matColumnDef="invoicedTHC">
    <th mat-header-cell *matHeaderCellDef> Terminal handling costs </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.THC}} </td>
  </ng-container>

  <ng-container matColumnDef="invoicedBAF">
    <th mat-header-cell *matHeaderCellDef> Bunker adjustment factor </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.BAF}} </td>
  </ng-container>

  <ng-container matColumnDef="invoicedTotal">
    <th mat-header-cell *matHeaderCellDef> Total </th>
    <td mat-cell *matCellDef="let container"> {{container.InvoicedCosts.Total}} </td>
  </ng-container>

  <!--expected columns-->
  <ng-container matColumnDef="expectedOHC">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.OFC}} </td>
  </ng-container>

  <ng-container matColumnDef="expectedTHC">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.THC}} </td>
  </ng-container>

  <ng-container matColumnDef="expectedBAF">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.BAF}} </td>
  </ng-container>

  <ng-container matColumnDef="expectedTotal">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> {{container.ExpectedCosts.Total}} </td>
  </ng-container>

  <!--Invoiced or expected columns-->
  <ng-container matColumnDef="invoicedLabel">
    <th mat-header-cell *matHeaderCellDef> Invoiced or expected </th>
    <td mat-cell *matCellDef="let container"> Invoiced </td>
  </ng-container>

  <ng-container matColumnDef="expectedLabel">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let container"> Expected </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="headersContainers"></tr>
  <tr mat-row *matRowDef="let row; columns: headersContainers;"> </tr>

</table>

And the SCSS is as following:

table {
  width: 100%;
}

.mat-column-containerReference {grid-area: containerReference;}
.mat-column-invoiceReference {grid-area: invoiceReference;}
.mat-column-invoicedOHC {grid-area: invoicedOHC;}
.mat-column-invoicedTHC {grid-area: invoicedTHC;}
.mat-column-invoicedBAF {grid-area: invoicedBAF;}
.mat-column-invoicedTotal {grid-area: invoicedTotal;}
.mat-column-expectedOHC {grid-area: expectedOHC;}
.mat-column-expectedTHC {grid-area: expectedTHC;}
.mat-column-expectedBAF {grid-area: expectedBAF;}
.mat-column-expectedTotal {grid-area: expectedTotal;}
.mat-column-expected {grid-area: expected;}
.mat-column-invoiced {grid-area: invoiced;}
.mat-column-invoicedLabel {grid-area: invoicedLabel;}
.mat-column-expectedLabel {grid-area: expectedLabel;}

tr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
            "containerReference invoiceReference invoicedLabel invoicedOHC invoicedTHC invoicedBAF invoicedTotal"
            "containerReference invoiceReference expectedLabel expectedOHC expectedTHC expectedBAF expectedTotal";
}

tr.mat-header-row {
  grid-template-areas: 
        "containerReference invoiceReference invoicedLabel invoicedOHC invoicedTHC invoicedBAF invoicedTotal";
  
  .mat-column-expected,
  .mat-column-expectedLabel {
    display: none;
  }
}

td, th {
  display: flex;
  align-items: center;
  padding-left: 5px !important;
  border-right: 1px solid rgba(128, 128, 128, .4);
}

This results in the merged rows how I wanted, but the columns do not allign with the rows:

[![enter image description here][2]][2]

EDIT 2:

after the comment of RobbieAreBest, I've changed the scss part grid-template-columns: repeat(4, 1fr); to grid-template-columns: repeat(7, 1fr);

This gave me the following result: [![enter image description here][3]][3]

Either, it still does not look perfect. If anyone knows how to make the cell allign, that would be nice! [1]: https://i.sstatic.net/JzP51.png [2]: https://i.sstatic.net/fnut4.png [3]: https://i.sstatic.net/Vx7cK.png

robbieAreBest · Accepted Answer · 2020-09-16 14:10:21Z

1

I think this would be a good case for CSS grid. In your template, I wouldn't worry about rowSpans at all, just get all your data into its own column (have separate columns for Invoiced and Expected values).

Add a rule for your tr tags to display:grid and define you grid-template-columns as needed. You could then apply a grid-area to each column and define your 'rowSpan' by using a grid-template-areas rule.

You could also define a different set of grid-template-areas rules for tr.mat-header-row if you would like the header to display differently.

I've worked up a little example that should have a solution similar to what you are looking for: https://stackblitz.com/edit/angular-u2b8qa?file=src/app/table-basic-example.scss

answered Sep 16, 2020 at 14:10

robbieAreBest

1,78114 silver badges16 bronze badges

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

4 Comments

KaiHoogenhoud Over a year ago

Thanks for the reply, it turned out almost as I wanted. I've eddited my question, maybe you can help with the last bit!

robbieAreBest Over a year ago

You just need to change grid-template-columns: repeat(4, 1fr); to grid-template-columns: repeat(7, 1fr); since you have 7 columns. You can also define different sizes for the columns if you wish.

KaiHoogenhoud Over a year ago

Ah, thank you. I'm not familiar with css so this really helped me. The table does not look like it should yet, but it is better than it was.

robbieAreBest Over a year ago

Wonderful, I'm glad that put you in the right direction. You might want to also try adding .mat-column-expectedOHC, .mat-column-expectedTHC, .mat-column-expectedBAF, and .mat-column-expectedTotal to the display:none rule in tr.mat-header-row

Collectives™ on Stack Overflow

Angular Material mat table merged rows

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related