带有固定标题和分页器的 Angular 6 材料数据表 [英] Angular 6 Material Data Table with Fixed Header and Paginator

问题描述

如何让Data Table组件的Header固定在顶部，Paginator固定在底部?

这是我的 HTML:

<table mat-table #itemsTable [dataSource]="dataSource" class="items-list"><ng-container matColumnDef="position"><th mat-h​​eader-cell *matHeaderCellDef>号<td mat-cell *matCellDef="let element">{{element.position}} </td></ng-容器><ng-container matColumnDef="name"><th mat-h​​eader-cell *matHeaderCellDef>名称</th><td mat-cell *matCellDef="let element">{{element.name}} </td></ng-容器><ng-container matColumnDef="weight"><th mat-h​​eader-cell *matHeaderCellDef>重量<td mat-cell *matCellDef="let element">{{element.weight}} </td></ng-容器><ng-container matColumnDef="symbol"><th mat-h​​eader-cell *matHeaderCellDef>符号<td mat-cell *matCellDef="let element">{{element.symbol}} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr><tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;"(click)="onRowClicked(row)"></tr><mat-paginator [pageSizeOptions]="[50, 100, 250]" showFirstLastButtons></mat-paginator>

我尝试将 sticky 添加到文档中的 <tr mat-h​​eader-row>，但它不起作用.

我在 .ts 文件中的导入:

 import { Component, OnInit, OnChanges, Input, ViewChild } from '@angular/core';从'src/app/services/tabs-data.service'导入{TabsDataService}；从 'src/app/services/components-data.service' 导入 { ComponentsDataService };从 '@angular/material' 导入 { MatPaginator, MatTableDataSource, MatTable, MatTableModule }

;

解决方案

我在 材料站点 可以通过向 matHeaderRowDef 添加粘性来修复标题:

对于分页器，我向 mat-paginator 添加了一个类:

根据链接中的答案创建一个类 @frederik 在评论中提供

.mat-paginator-sticky {底部:0px；位置:粘性；z-索引:10；}

How to make the Header of Data Table component fixed to the top, and the Paginator fixed to the bottom?

This is my 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>

I tried adding sticky to the <tr mat-header-row> from the docs, but it doesn't work.

My imports in .ts file:

 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'

;

解决方案

I found in the examples on the material site that the header can be fixed by adding sticky to the matHeaderRowDef:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">

For the paginator i added a class to mat-paginator:

<mat-paginator ...
                class="mat-paginator-sticky"> 

with a class based on the answer in the link @frederik provided in the comments

.mat-paginator-sticky {
  bottom: 0px;
  position: sticky;
  z-index: 10;
}

这篇关于带有固定标题和分页器的 Angular 6 材料数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！