Im having issue with sorting and pagination with angular material table. Data are coming from store as observable and stored into table sucessfully.

Sorting columns name are the same with columnDef but yet its not working. And despite pagination is set to 5 its showing all the data.

Demo Below.

https://stackblitz.com/edit/new-project-3gxwan?file=src/app/shared/components/simple-table/simple-table.component.ts

CodePudding user response：

When the productCategories observable is called this.paginator and this.sort are not available as they are inside the ngIf condition.

if you move the if condition inside the table, sorting and pagination should start to work.

<table #formTable mat-table [dataSource]="dataSource" matSort>
  <div *ngIf="productCategories$ | async as productCategories">
    ...
  </div>
</table>

<mat-paginator
    [length]="5"
    [pageSize]="5"
    [pageSizeOptions]="[5, 10, 20]"
    showFirstLastButtons
    (page)="pageEvent = $event"
    aria-label="Select page of periodic elements"
></mat-paginator>