Material design paginator doesn't work with tables dynamically generated

Question

I am trying to generate multiple tables with multiple columns using material table and it worked correctly. But the problem arises when paging the results of each table. It seems that it does not take the reference of each table, then all the paginators are set to 0.

Here is my code in stackblitz:

https://stackblitz.com/edit/angular-k8qfd3?file=src%2Fapp%2Fapp.component.ts

Maybe this is how stackblitz works but my question is how come all the code is pre-compiled and not in the original typescript format? — Mickers
please check you are giving the mat-paginator [length]="100" table data length — upinder kumar
Check line 118 as well in app.component.ts. this.paginator is always undefined. — Mickers

upinder kumar upinder kumar · Accepted Answer · 2019-10-14T13:23:17

try this set the pagination length in the ngAfterViewInit hook.

ngAfterViewInit() {

this.paginationLength = this.tableData.length;

}

in the template:

<mat-paginator [length]="paginationLength"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Material design paginator doesn't work with tables dynamically generated

1 Answers