Как сделать компонент заголовка таблицы данных установленным вверху, а 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'
;