Having difficulty with a transition from a basic html table to a mat-table. Struggling to merge two rows on the first two columns.
The current setup has the mat-table on top and the basic html table below:
[![enter image description here][1]][1]
Desired layout for the mat table is as follows: two rows for each reference + invoice, one for invoiced and one for expected, similar to the format in the basic html table.
Basic html table structure:
<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>