Components: Paginator in Table with multiple tables in separate tabs not working

Created on 22 Dec 2017 · 13Comments · Source: angular/components

Bug, feature request, or proposal:

I am using a Material tab control. I have 2 tabs, Active, Inactive.
In both of the tabs, i have a material table with separate datasource and separate paginator.

Pagination is working on first (Active) tab only but not on 2nd tab (Inactive)

Here is my application.

https://angular-wnhmhd-o6pq3b.stackblitz.io/

https://stackblitz.com/edit/angular-wnhmhd-o6pq3b?file=app/table-pagination-example.html

What is the expected behavior?

Because both the tables have separate data source and separate paginator. Hence paging should work
on both

What is the current behavior?

on first tab. Paging working fine. On second tab, paging is not working.

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/uDmqyY

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-wnhmhd-o6pq3b?file=app/table-pagination-example.html

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

Source

satinder711

Most helpful comment

@satinder711, when you first load your component, the MatPaginator of the hidden tab isn't rendered, so it's undefined and you cannot bind it to the data source.

You need to bind it when you change tabs (for example in selectedIndexChange event). You cannot bind it in the AfterViewInit because paginator2 is null at this time. You can do something like this:

<mat-tab-group #tabGroup (selectedIndexChange)="_setDataSource($event)"  >

_setDataSource(indexNumber) {
    setTimeout(() => {
      switch (indexNumber) {
        case 0:
          !this.dataSource.paginator ? this.dataSource.paginator = this.paginator : null;
          break;
        case 1:
          !this.dataSource2.paginator ? this.dataSource2.paginator = this.paginator2 : null;
      }
    });
  }

Working example: https://stackblitz.com/edit/data-table-multiple-data-source

The setTimeout above is just to make sure MatPaginator was already rendered so you can get it's instance with @ViewChild. In fact it works if you get rid of it in the working example but as I'm not sure the @Output() selectedIndexChange is called after the components inside the tab were properly rendered, I left it in stackblitz.

julianobrasil on 22 Dec 2017

👍6 🎉4 ❤1 😄1

All 13 comments

You are connecting both of your data sources to the same paginator. Also please keep GitHub issues for bug reports/feature requests. Better avenues for troubleshooting/questions are stack overflow, gitter, mailing list, etc.

CDDelta on 22 Dec 2017

Hi CDDelta thanks for your response.

I am using separate paginators for both datasources.

.ts file

dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource2 = new MatTableDataSource(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatPaginator) paginator2: MatPaginator;

/**

Set the paginator after the view init since this component will
be able to query its view for the initialized paginator.
*/
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource2.paginator = this.paginator2;
}

first one is paginator and second one is paginator2

satinder711 on 22 Dec 2017

@satinder711, when you first load your component, the MatPaginator of the hidden tab isn't rendered, so it's undefined and you cannot bind it to the data source.

<mat-tab-group #tabGroup (selectedIndexChange)="_setDataSource($event)"  >

_setDataSource(indexNumber) {
    setTimeout(() => {
      switch (indexNumber) {
        case 0:
          !this.dataSource.paginator ? this.dataSource.paginator = this.paginator : null;
          break;
        case 1:
          !this.dataSource2.paginator ? this.dataSource2.paginator = this.paginator2 : null;
      }
    });
  }

Working example: https://stackblitz.com/edit/data-table-multiple-data-source

julianobrasil on 22 Dec 2017

👍6 🎉4 ❤1 😄1

@ViewChild gets the first matched element in your template, so both paginator and paginator2 are matched to the paginator on the first tab You will have to use @ViewChild with a selector @ViewChild('paginator2').

CDDelta on 22 Dec 2017

👍1

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

josephperrott on 22 Dec 2017

Thanks julianobrasil. Its working now.

satinder711 on 25 Dec 2017

Thank you very much julianobrasil.

sivajallu on 28 Feb 2018

Came across this issue myself. This is a workaround for using multiple tables in a mat-tab-group but when lazy loading the tabs in ng-template tags it does not work. Fixed the issue by implementing the tables in different components.

lukekroon on 4 Jul 2018

@julianobrasil Gracias! me ha servido mucho su aporte :)

mikepruebas23 on 31 Oct 2018

👍1

@satinder711 @julianobrasil julianobrasil said right thing which will helpful for doing some logic on particular tab but your functionality can run smoothly by changing following code

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatPaginator) paginator2: MatPaginator;
to
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('paginator2') paginator2: MatPaginator;
that's it ...