Paginator in Table with multiple tables in separate tabs not working

[satinder711]

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?

[CDDelta]

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.

[satinder711]

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

[julianobrasil]

@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.

[CDDelta]

@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').

[josephperrott]

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

[satinder711]

Thanks julianobrasil. Its working now.

[sivajallu]

Thank you very much julianobrasil.

[lukekroon]

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.

[mikepruebas23]

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

[chetan-github]

@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 ...

[rifqiahmaddani]

thank you very much @julianobrasil, you make my day

[faresayyad]

@chetan-github You are right

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}