Adding multiple MatPaginators to the same DataSource

This concise guide assists Angular developers utilizing the Angular Material library. A client requested a specific feature: Displaying a (Mat)Paginator both above and below all MatTables.

The challenge: A MatPaginator can only be linked to a single DataSource.

Initial attempts involved using templates to render the paginator twice, but this proved unsuccessful; the second paginator remained non-functional. Implementing custom pagination logic, similar to server-side pagination, was considered but deemed impractical due to the extensive modifications required across multiple pages. Experiments with signals to synchronize the second paginator also fell short. The solution presented below offers a more straightforward approach.

Implementation

Template:

<code class="language-html"><mat-paginator [pageSize]="50"></mat-paginator>
<table mat-table>...</table>
<mat-paginator (page)="pageChanged($event)"></mat-paginator></code>

Component:

<code class="language-typescript">import { Component, AfterViewInit, ViewChild, Input } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { effect } from '@angular/core';


@Component(/* ... */)
export class DocumentListComponent implements AfterViewInit {
  @Input() documents!: any[]; // input of the data;  Use a more specific type if possible.

  dataSource = new MatTableDataSource<any>(); // dataSource of the table; Use a more specific type if possible.

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;

  constructor() {
    effect(() => this.dataSource.data = this.documents);
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  pageChanged(event: PageEvent): void {
    this.dataSource.paginator!.pageIndex = event.pageIndex;
    this.dataSource.paginator!._changePageSize(event.pageSize);
  }
}</code>

Explanation

The primary MatTable and MatPaginator are implemented as standard. The connection is established within the ngAfterViewInit() hook.

Since the second paginator doesn't update automatically, its properties are derived from the first paginator, which manages the table data. The pageChanged() method handles pagination events from the bottom paginator, updating the first paginator and the dataSource accordingly. Note the use of the non-null assertion operator (!) which assumes dataSource.paginator will be available after ngAfterViewInit. Consider adding error handling for production code. Also, replace any with a specific type for better type safety.

The above is the detailed content of Adding multiple MatPaginators to the same DataSource. For more information, please follow other related articles on the PHP Chinese website!