Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material Multiple Paginator in same Component and View

Have 2 tables in view and displaying some graphs along with the tables, everything works except the paginator on 2 tables. , which takes data from 2 sources. When the Paginator of upper table clicked the lower table changes the data,

component have initialized the paginator and tables with data sources,

My Component.ts

  export class FinancialMetricsComponent implements OnInit, AfterViewInit {

  pageSize = 20;
  dataSource: MatTableDataSource<SnowTicket> | null;
  utilizationDataSource: MatTableDataSource<Utilization> | null;

  @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
  @ViewChildren(MatSort) sort = new QueryList<MatSort>();




ngOnInit() {

    this.changeDataAccordingToDate();
    this.dataSource = new MatTableDataSource();
    this.data$.pipe(
      filter(Boolean)
    ).subscribe((tickets) => {
      this.accountsData = tickets;
      this.dataSource.data = tickets;
    });

    this.pcsService.getUtilizationData('120').subscribe(resources => {
      this.utilizationSubject$.next(resources);
    });
    this.utilizationDataSource = new MatTableDataSource();
    this.utilizationData$.pipe(
      filter(Boolean)
    ).subscribe((tickets) => {
      this.utilizationData = tickets;
      this.utilizationDataSource.data = tickets;
    });
  }


  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator.toArray()[0];
    this.dataSource.sort = this.sort.toArray()[0];

    this.utilizationDataSource.paginator = this.paginator.toArray()[1];
    this.utilizationDataSource.sort = this.sort.toArray()[1];

    }
}

In view here only added the tables, that have the paginators. When the paginator in upper has table removed the lower table paginator works. else only the upper paginator works, when it clicked the lower table changes data,

View.html

<fury-list name="AWS Resources Expenditure" [columns]="columns" (filterChange)="onFilterChange($event)">
  <mat-table #table [dataSource]="dataSource" matSort>
    <ng-container *ngFor="let column of columns">
      <ng-container *ngIf="column.notCurrency" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property] }}
        </mat-cell>
      </ng-container>
      <ng-container *ngIf="!column.notCurrency" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property] | currency }}
        </mat-cell>
      </ng-container>
    </ng-container>
    <mat-header-row *matHeaderRowDef="visibleColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: visibleColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator class="paginator" [pageSize]="10"></mat-paginator>
</fury-list>



<fury-list name="AWS EC2 Utilization (Past 120 days)" [columns]="utilizationColumns" (filterChange)="onFilterChangeU($event)">
  <mat-table #table [dataSource]="utilizationDataSource" matSort>

    <ng-container *ngFor="let column of utilizationColumns">
      <ng-container *ngIf="!column.isAvg" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{ { column.name }}</span> {{ row[column.property] }}
        </mat-cell>
      </ng-container>
      <ng-container *ngIf="column.isAvg" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property]}}
          <mat-icon *ngIf="row[column.property] < 10"> trending_down</mat-icon>
          <mat-icon *ngIf="row[column.property] > 70"> trending_up</mat-icon>
        </mat-cell>
      </ng-container>
    </ng-container>

    <mat-header-row *matHeaderRowDef="visibleColumnsU"></mat-header-row>
    <mat-row *matRowDef="let row; columns: visibleColumnsU;"></mat-row>
  </mat-table>
  <mat-paginator #paginatorU class="paginator" [pageSize]="5"></mat-paginator>
</fury-list>
like image 517
Tharaka_Ravishan Avatar asked Feb 28 '19 06:02

Tharaka_Ravishan


3 Answers

I would bind the paginators based on their template variable and not rely on the QueryList to contain them in the proper order.

@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('paginatorU') paginatorU: MatPaginator;

ngAfterViewInit(): void {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort.toArray()[0];
  this.utilizationDataSource.paginator = this.paginatorU;
  this.utilizationDataSource.sort = this.sort.toArray()[1];
}
like image 108
Fabian Küng Avatar answered Oct 26 '22 22:10

Fabian Küng


As mentioned in the previous answers, the component should have as many paginators as needed and they should be named:

@ViewChild('firstPaginator', {static: true}) firstPaginator: MatPaginator;
@ViewChild('secondPaginator', {static: true}) secondPaginator: MatPaginator;

And the view should call these paginators:

    <mat-paginator #firstPaginator [pageSize]="5"></mat-paginator>

    <mat-paginator #secondPaginator [pageSize]="5"></mat-paginator>
like image 21
OOP Avatar answered Oct 26 '22 23:10

OOP


you need to define two distinct paginators if you want them to work independently.

like image 29
jcuypers Avatar answered Oct 26 '22 23:10

jcuypers