CODEWITHSUNDEEP
angulartypescriptmaterial-uiangular-material
user16799749
user16799749

Reputation:

Angular Material table sorting and pagination not working

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

Upvotes: 1

Views: 956

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3140

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>

Upvotes: 1

Related Questions