Multiple Pagination(Mat-table & Pagination): Multiple pagination in same component with different data source not working

Description

I tried to put two tables in one component with different data sources which worked well with the data rending part. However, the paginator didn’t work on the second table.

Reproduction

Please use StackBlitz to check the issue: StackBlitz Project Editor link: https://stackblitz.com/edit/angular-brxwzo StackBlitz Output link: https://angular-brxwzo.stackblitz.io

Steps to reproduce:

1. Create two table
2. Create two data sources with different numbers of elements into it.
3. Bind the data source with the respective data source for eg. displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA); dataSource1 = new MatTableDataSource<PeriodicElement>(myData); Table 1 <table mat-table [dataSource]="dataSource"> Table 2 <table mat-table [dataSource]="dataSource1">
4. Create the paginator for the following datasouces: @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; @ViewChild(MatPaginator, {static: true}) paginator2: MatPaginator;
5. Only the first paginator will work in the output.

Expected Behavior

Like the first table pagination, the second table pagination should also work independently to the first as the data sources are different, the paginator pointing instance is different.

Actual Behavior

Only the first table pagination is working rest of all other table pagination are begin ignored.

Environment

• Angular: 9.0.5
• CDK/Material: 9.2.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.01

[Md-Fazil]

I could use 2 paginators in the same component with the following fix:

1. Name the paginator in the html file. <mat-paginator #allPaginator="matPaginator" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>

2. Declare the paginator in the component ts file. @ViewChild('allPaginator',{read: MatPaginator}) allPaginator: MatPaginator;

3. Indicate paginator to be used by data source in the component ts file. this.datasource.paginator = this.allPaginator;

[furqee]

Same issue on Angular 7.2, even after defining the paginator in html like this

Table 1

TS @ViewChild('MatPaginator1') MatPaginator1: MatPaginator; HTML <mat-paginator #MatPaginator1></mat-paginator>

Table 2

TS @ViewChild('MatPaginator2') MatPaginator2: MatPaginator; HTML <mat-paginator #MatPaginator2></mat-paginator>