Multiple Pagination(Mat-table & Pagination): Multiple pagination in same component with different data source not working
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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(ELEMENT_DATA);
dataSource1 = new MatTableDataSource(myData);
`
**Table 1**
`
`
**Table 2**
` `
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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Ouvrez le projet StackBlitz lié et reproduisez le problème en utilisant les deux instances de MatTableDataSource et MatPaginator décrites dans les étapes. Suivez les deux bindings des paginators et vérifiez que chaque table pagine ses propres données indépendamment ; la tâche est terminée lorsque le second paginator fonctionne sans affecter le premier.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 35/100