How to use 2 pagination for single table in angular material table?

6
votes

I am creating an application in angular6 with angular material. How to use 2 pagination in a single table. enter image description here I want to show pagination both places Header and Footer.

The header pagination only shows the "Items per page" with drop-down. The footer pagination will show arrow and all.

When I add 2 pagination the second one is not working.

Please refer screenshots enter image description here

Thanks.

1
angularangular-materialangular-material-table
Request you to create a stackblitz – Prashant Pimpale

1 Answers

9
votes

I don't think there is an official solution for that at the moment and you have to synchronize the both paginators yourself.

Configure the first paginator as you like and add all the input params to the second one:

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

<table mat-table [dataSource]="dataSource"> <!-- ... --> </table>

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

In your component add a method to sync the first paginator, if the second is used:

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

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

syncPrimaryPaginator(event: PageEvent) {
  this.paginator.pageIndex = event.pageIndex;
  this.paginator.pageSize = event.pageSize;
  this.paginator.page.emit(event);
}

I forked this official example and updated it to reproduce your problem. Here is my solution.