如何使“数据表头”组件固定在顶部,而“分页器”固定在底部?
这是我的HTML:
<div class="example-container mat-elevation-z8">
<table mat-table #itemsTable [dataSource]="dataSource" class="items-list">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;" (click)="onRowClicked(row)"></tr>
</table>
<mat-paginator [pageSizeOptions]="[50, 100, 250]" showFirstLastButtons></mat-paginator>
</div>
我尝试从文档中将sticky
添加到<tr mat-header-row>
,但这是行不通的。
我在.ts文件中的导入:
import { Component, OnInit, OnChanges, Input, ViewChild } from '@angular/core';
import { TabsDataService } from 'src/app/services/tabs-data.service';
import { ComponentsDataService } from 'src/app/services/components-data.service';
import { MatPaginator, MatTableDataSource, MatTable, MatTableModule } from '@angular/material'
;
答案 0 :(得分:33)
我在material site的示例中发现,可以通过在matHeaderRowDef上添加粘性来固定标头:
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">
对于分页器,我向mat-paginator添加了一个类:
<mat-paginator ...
class="mat-paginator-sticky">
使用基于评论中提供的link @frederik答案的课程
.mat-paginator-sticky {
bottom: 0px;
position: sticky;
z-index: 10;
}
答案 1 :(得分:5)
由于在6.2.3中添加了sticky属性,因此尝试更新项目中的棱角材料。
答案 2 :(得分:1)
以下CSS为我工作:
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
.mat-header-row{
position: sticky;
top: 0;
z-index: 100;
background: white;
}
答案 3 :(得分:0)
您可以将普通的粘性mat-footer-row
与colspan
一起使用,并将分页器放入其中:
<table mat-table>
...
<ng-container matColumnDef="paginator">
<td mat-footer-cell *matFooterCellDef [colSpan]="displayedColumns.length">
<mat-paginator ...></mat-paginator>
</td>
</ng-container>
<tr mat-footer-row *matFooterRowDef="['paginator']; sticky: true"></tr>
</table>
并使用这样的样式,以使其更具吸引力:
.mat-row:last-child td {
border-bottom: none;
}
.mat-footer-row:first-child td {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mat-footer-cell .mat-paginator {
margin-left: -24px;
margin-right: -24px;
}
答案 4 :(得分:0)
根据材料8.1
对于粘性标头,我们需要提供一个粘性值,如此处许多答案所示
用于粘性分页器或底部固定分页器。
我们可以将表格包装在具有max-height或height CSS属性的div内,然后将paninator放在该div之外。
HTML代码示例。
<div class="mat-elevation-z2">
<div class="table-container">
<!--- List of column definitions here --->
<table mat-table [dataSource]="dataSource" matSort>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
CSS
table {
width: 100%;
}
.table-container {
max-height: calc(100vh - 155px); // or height: calc(100vh - 155px); depending on your need change
overflow: auto;
}
答案 5 :(得分:0)
我也有这个问题。我创建了一个固定大小的div,然后将表保留在div中。这应该可以解决您的问题。
<div style="height: 300px; overflow: auto">
<table mat-table [dataSource]=dataSource>
<!--Your table entries here -->
.
.
.
.
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>