带有固定标题和分页器的 Angular 6 材质数据表

Question

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

这是我的 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'

;

Answer 1

我在material site 的示例中发现，可以通过向 matHeaderRowDef 添加粘性来修复标题：

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

对于分页器，我在 mat-paginator 中添加了一个类：

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

使用基于 cmets 中提供的link@frederik 答案的类

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

Answer 2

根据材料 8.1

1. 对于粘性标题，我们需要提供一个粘性值，如这里的许多答案所示

2. 用于粘性分页器或底部固定分页器。

我们可以用 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>
 </div>

CSS

  table {
    width: 100%;
  }

  .table-container {
    max-height: calc(100vh - 155px); // or height: calc(100vh - 155px); depending on your need  change
    overflow: auto;
  }

Answer 3

尝试更新项目中的角度材质，因为粘性属性是在 6.2.3 中添加的。

Answer 4

下面的 css 对我有用：

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
.mat-header-row{
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  }

Answer 5

我也有这个问题。我创建了一个固定大小的 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>

Answer 6

您可以使用普通的粘性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;
}