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

[Oliverq755]

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

[enricobenedos]

Any workaround? I'm having same problem with two component placed in the same parent html file

[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>

[ChrisMarkatselis]

I had the same issue with 2 mat-tables into the same component and I use the workarround of 3 different components (1 as a wrapper of tables and 2 for tables)
You can make a component and at its html file do that:

at [input] are all @input() elements that you may want to pass at this component. (I used it in order to make the wrapper able to use at all of my components)

[mdsameershaikh]

Facing the same issue, Please share if anyone has workaround for this

[ChrisMarkatselis]

@mdsameershaikh what is your need??? Want to display only data in two different tables or not?

[lkainers]

I have a similar issue. But I use external data (pagination over REST request).
When I change pageSize on one paginator it switches on both, but the change is just emited on one.
It seems the paginators pageSize dropdowns are somehow connected.

[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;

[mistr-hnm]

@Md-Fazil

you solution is worked

[mweiss237]

@Md-Fazil your solution is not working in my application.

@hirenmistry17 how did you fix it? I added the ID #allPaginator="matPaginator" to both of my paginators, declared it once in my component and appended them to my datasources.
Still having the same problem.

[mistr-hnm]

#allPaginator1 for first table pagination and for second one use #allPaginator2 and then declare it ViewChild("allPaginator1") and for second ViewChild("allPaginator2") and after than set to datasource pagination and it will worked

[jaydudhatra1]

Below is the easiest and flexible solution I have implemented for syncing multiple paginators.

---

HTML

<mat-paginator #paginator1
[pageSizeOptions]="[10, 20, 50, 100]"
(page)="syncPaginators($event)"
showFirstLastButtons>

<mat-paginator #paginator2
[pageSizeOptions]="[10, 20, 50, 100]"
(page)="syncPaginators($event)"
showFirstLastButtons>

---

TS

// Initialization of paginators
@ViewChild('paginator1') paginator1: MatPaginator;
@ViewChild('paginator2') paginator2: MatPaginator;

ngAfterViewInit() {
this.dataSource.data = this.Data; // JSON data coming from API
this.dataSource.paginator = this.paginator1;
window.setTimeout(() => this.syncPaginators(this.paginator1, this.paginator1, this.paginator2));
}

public syncPaginators(event): void {
this.paginator1.length = this.paginator2.length = event.length;
this.paginator1.pageIndex = this.paginator2.pageIndex = event.pageIndex;
this.paginator1.pageSize = this.paginator2.pageSize = event.pageSize;
}