Multiple Paginators in a single HTML File programmed with Angular

Using Paginator makes the Web Pages more user friendly to view as the User does not have to scroll through long lists. This can also optimise how data is fetched from the backend. Using Material package makes providing Paginators in Web Pages developed using Angular easy to program while giving very beautiful User Interface (UI).

Paginators can be attached to different objects from Material. However, here I discuss attaching Mat-Paginator to Mat-Table. Mat-Tables can be used to display rows and columns of data, generally read from a database.

Attaching Mat-Paginator to a Mat-Table when there is one Mat-Table on a Page

Attaching a Mat-Paginator to a Mat-Table is quite easy to program. The steps are as provided below. It is assumed that the Material Package is installed and Mat-Table and Mat-Paginator have been included app.modules.ts.

  • Include Mat-Table in HTML File

Provided below is an example of creating a Mat-Table.

          <div class="mat-elevation-z8">
              <table mat-table [dataSource]="listData" class="mat-elevation-z8" matSort width="100%">

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

                  <!-- Country Code Column -->
                  <ng-container matColumnDef="countryCode">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Country Code </th>
                      <td mat-cell *matCellDef="let element" align="left"> {{element.countryCode}} </td>

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

                  <!-- ISO3166 Code Column -->
                  <ng-container matColumnDef="ISOAlpha3Code">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> ISO Alpha 3 Code </th>
                      <td mat-cell *matCellDef="let element" align="left"> {{element.ISOAlpha3Code}} </td>

                  <!-- ISO2 3166 Column -->
                  <ng-container matColumnDef="ISOAlpha2Code">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> ISO Alpha 2 Code </th>
                      <td mat-cell *matCellDef="let element" align="left"> {{element.ISOAlpha2Code}} </td>

                  <!-- E164_CC Column -->
                  <ng-container matColumnDef="ISONumericCode">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> ISO Numeric Code </th>
                      <td mat-cell *matCellDef="let element" align="left"> {{element.ISONumericCode}} </td>

                  <!-- Currency Code Column -->
                  <ng-container matColumnDef="currencyCode">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Currency Code </th>
                      <td mat-cell *matCellDef="let element" align="left"> {{element.currencyCode}} </td>

                  <!-- Edit Column -->
                  <ng-container matColumnDef="edit">
                    <th mat-header-cell *matHeaderCellDef>
                    <td mat-cell *matCellDef="let row">
                        <a mat-button matTooltip="Edit" [routerLink]="['/country/edit', row.countryCode]"><mat-icon>create</mat-icon></a>

                  <!-- Delete Column -->
                  <ng-container matColumnDef="delete">
                    <th mat-header-cell *matHeaderCellDef>
                    <td mat-cell *matCellDef="let row">
                        <button mat-button matTooltip="Delete" color="warn" (click)="onDelete(row.countryCode)"><mat-icon>clear</mat-icon></button>

                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)" [ngClass]="{ 'selected': row === selectedRow }"></tr>

  • Include Mat-Paginator in the HTML File

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

  • Link the data Source to the Mat-Table

<table mat-table [dataSource]="listData" class="mat-elevation-z8" matSort width="100%">

  • Declare the Mat-Paginator in the .ts file and Link the Mat-Paginator to the Mat-Table Data Source. This activity should be preferably done in the ngInit() method when the Page initialises.

@ViewChild(MatPaginator) paginator: MatPaginator;
this.listData.paginator = this.paginator;

See the video below for viewing the working of the Paginator.


Adding multiple Mat-Paginators on a single HTML Page

When multiple Mat-Paginators are added in a single Page, the above technique can no longer work. If the above is done, then the pagination of the first Mat-Paginator rules all the subsequent Mat-Tables; though you may have actually attached separate Mat-Paginators for them.

To overcome this issue, the following needs doing.

  • Name the Mat-Paginators in the HTML Files

<mat-paginator #uploadResultPaginator [pageSizeOptions]="[7, 15, 20]" showFirstLastButtons></mat-paginator>

  • Declare the individual Mat-paginators as follows in the .ts file

@ViewChild('uploadResultPaginator', {read: MatPaginator}) uploadResultPaginator: MatPaginator;

  • Attach the Mat-Paginator to the Data Source of the Mat-Table

this.uploadResult.paginator = this.uploadResultPaginator;

Here is a working example of this implementation.

%d bloggers like this: