[英]Angular Material mat table merged rows
I'm struggling with the following.我正在努力解决以下问题。 I want to change my basic html table to a mat-table.
我想将我的基本 html 表更改为 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:我在顶部有 mat-table,底部有基本的 html 表:
[![enter image description here][1]][1] [![在此处输入图像描述][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:我的基本 html 表如下:
<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:虽然我的 mat-table html 如下:
<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.请注意,我可以更改数据源设置,因为我在 java 中使用了 ArrayNode。
EDIT:编辑:
I've changed the the HTML file to this:我已将 HTML 文件更改为:
<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: SCSS 如下:
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] [![在此处输入图像描述][2]][2]
EDIT 2:编辑2:
after the comment of RobbieAreBest, I've changed the scss part grid-template-columns: repeat(4, 1fr);
在 RobbieAreBest 的评论之后,我改变了 scss 部分
grid-template-columns: repeat(4, 1fr);
to grid-template-columns: repeat(7, 1fr);
到
grid-template-columns: repeat(7, 1fr);
This gave me the following result: [![enter image description here][3]][3]这给了我以下结果:[![在此处输入图像描述][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.stack.imgur.com/JzP51.png [2]: https://i.stack.imgur.com/fnut4.png [3]: https://i.stack.imgur.com/Vx7cK.png
[1]: https://i.stack.imgur.com/JzP51.png [2]: https://i.stack.imgur.com/fnut4.png [3]: HTTPS://i.stack。 imgur.com/Vx7cK.png
I think this would be a good case for CSS grid.我认为这对于 CSS 网格来说是一个很好的例子。 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).
在您的模板中,我根本不担心 rowSpans,只需将所有数据放入其自己的列中(对于已开票和预期值有单独的列)。
Add a rule for your tr
tags to display:grid
and define you grid-template-columns
as needed.为你的
tr
标签添加一个规则display:grid
并根据需要定义你的grid-template-columns
。 You could then apply a grid-area
to each column and define your 'rowSpan' by using a grid-template-areas
rule.然后,您可以将
grid-area
应用于每一列,并使用grid-template-areas
规则定义您的“rowSpan”。
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.如果您希望标题以不同方式显示,您
tr.mat-header-row
定义一组不同的grid-template-areas
规则。
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我已经制定了一个小例子,应该有一个类似于你正在寻找的解决方案: https : //stackblitz.com/edit/angular-u2b8qa?file=src/app/table-basic-example.scss
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.