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;
}