How can I have multiple instances of Mat Paginator in one component?

Question

I had to readjust the component that held my Mat Table / Mat Paginator because my HTML file had an ngIf. Those familiar will know that the Mat Paginator does not work with the standard convention of handling the paginator, because of time the data takes to arrive. Below you'll find the update typescript that works when ONE table uses the mat pagination.

Now, I need to have two tables with Mat Pagination in the same component. However, I am only able to get one to work. Being that I'm new to Angular, I was hoping someone could help point me in the right direction. I will be updating my question as I continue to do more research. From my understanding though, you can only have one instance of Mat Pagination per component.

You'll find the working Typescript code below:

 dataSource1 = new MatTableDataSource<any>(this.userData());
 dataSource2 = new MatTableDataSource<any>(this.userData2());

 private paginator: MatPaginator;

  @ViewChild(MatPaginator, { static: false }) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.dataSource1.paginator = this.paginator;
  }

ngOnInit() {
    this.dataSource1.paginator = this.paginator;
  }

Ultimately, I want the pagination to work for dataSource1 and dataSource2. Obviously, when I declare this.dataSource2.paginator = this.paginator in both the ngOnInit and ViewChild, it breaks pagination for both. I have verified that my HTML is fine.

Answer 1

i have no problems with 2 tables with the same paginator, i follow the angular docs guide and seen to works:

ts file:

import { Component, OnInit, ViewChild } from '@angular/core';
import {PageEvent, MatPaginator} from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

const ELEMENT_DATA2: PeriodicElement[] = [
  {position: 1, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 2, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 3, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 4, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 5, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 6, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 7, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 8, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 9, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 10, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'bootstrapDivTextInside';
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  dataSource2 = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA2);
  length = 100;
  pageSize = 2;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  pageEvent: PageEvent;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  constructor() {}

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource2.paginator = this.paginator;
  }

}

html template:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!---*******************************************************************************-->
<table mat-table [dataSource]="dataSource2" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = $event">
</mat-paginator>

EDIT:

in your case:

export class AdminComponent implements OnInit, AfterContentInit {
  USER_DATA: UserData[] = [];
  ORGANIZATION_DATA: OrganizationData[] = [];
  // Table Variables
  dataSourceUsers = new MatTableDataSource<UserData[]>(this.USER_DATA);
  dataSourceOrganizations = new MatTableDataSource<OrganizationData[]>(this.ORGANIZATION_DATA);
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

then in the ngOnInit execute the functions to bring the information and then set the paginator:

ngOnInit() {
    this.userData(); 
    this.dataSourceUsers.paginator = this.paginator;
    this.organizationData()
    this.dataSourceOrganizations.paginator = this.paginator;
  }