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

问题描述

如何使数据表头"组件固定在顶部，而分页器"固定在底部?

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

这是我的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>，但这不起作用.

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

我在.ts文件中的导入:

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'

;

推荐答案

尝试在项目中更新角度材质，因为在6.2.3中添加了sticky属性.

Try to update angular material in your project because the sticky attribute was added in 6.2.3.

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