-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple Pagination(Mat-table & Pagination): Multiple pagination in same component with different data source not working #20154
Comments
Any workaround? I'm having same problem with two component placed in the same parent html file |
Same issue on Angular 7.2, even after defining the paginator in html like this Table 1TS Table 2TS |
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) 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) |
Facing the same issue, Please share if anyone has workaround for this |
@mdsameershaikh what is your need??? Want to display only data in two different tables or not? |
I have a similar issue. But I use external data (pagination over REST request). |
I could use 2 paginators in the same component with the following fix:
|
you solution is worked |
@Md-Fazil your solution is not working in my application. @hirenmistry17 how did you fix it? I added the ID |
#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 |
Below is the easiest and flexible solution I have implemented for syncing multiple paginators. HTML<mat-paginator #paginator1 <mat-paginator #paginator2 TS// Initialization of paginators ngAfterViewInit() { public syncPaginators(event): void { |
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:
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">
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; @ViewChild(MatPaginator, {static: true}) paginator2: MatPaginator;
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
The text was updated successfully, but these errors were encountered: