Adding pagination to the mat-table using mat-paginator in Angular Material

It’s very difficult to see the entire table data, when we have large number of records in the table.

In such cases we use a simple navigation method called Pagination.

Pagination is nothing but dividing the large number of records in a tables into smaller parts or pages.

To add pagination to the Angular material table i.e., mat-table we can use mat-paginator component.

mat-paginator selector is part of Angular material module called MatPaginator.

Let’s take an example of Employee table as explained in the previous article.

Pagination in mat-table

Here are the steps to add pagination to the mat-table.

Step 1 : Import MatPaginator in component ts file

First we need to add the reference to the MatPaginator module in our table component ts file.

import { MatPaginator } from '@angular/material/paginator';

Add the mat-paginator selector in component html file under the mat-table element.

<table mat-table [dataSource]="EmpData"></table>
<mat-paginator #paginator [pageSizeOptions]="[2, 4, 6]" 
showFirstLastButtons></mat-paginator>

I have added template reference variable (‘#paginator’) to the mat-paginator element.

And use @ViewChild decorator to access template reference variable inside the component.

@ViewChild('paginator') paginator: MatPaginator;

Step 2: Use MatTableDataSource for mat-table data

In the previous example we have used a simple Employee array to bind the data to the mat-table element.

Instead of that we can use MatTableDataSource class which has built in support for filtering, sorting (using MatSort), and pagination (using MatPaginator).

EmpData : Employee[] =[{
    "Id": 1,
    "FirstName": "Johannah",
    "LastName": "Kiffin",
    "Email": "jkiffin0@google.pl",
    "Gender": "F",
    "JobTitle": "Administrative Assistant I"
  },{},{}];

dataSource: MatTableDataSource<Employee>;

ngAfterViewInit() {
    this.dataSource = new MatTableDataSource(this.EmpData);
}

In component HTML file 

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

Step 3: Assign Paginator property of MatTableDataSource

MatTableDataSource has a built in property called paginator.

We have to assign this property to the MatPagintor instance created in Step 1.

ngAfterViewInit() {
    this.dataSource = new MatTableDataSource(this.EmpData);
    this.dataSource.paginator = this.paginator;
}

That’s it Pagination will be visible under the table as shown below.

mat-paginator options

Now we will go through different types of options in mat-paginator.

<mat-paginator #paginator [pageSizeOptions]="[2, 4, 6]" 
showFirstLastButtons></mat-paginator>

mat-paginator pageSizeOptions

We can give different page sizes using pageSizeOptions attribute, so that user can select the number records from a drop down.

pageSizeOptions attribute accepts numeric array values.

Instead of giving them inside component html file, we can create a varible in component ts file and assign it to the pageSizeOptions.

//In ts file

pageSizes = [2,4,6];

<mat-paginator #paginator [pageSizeOptions]="pageSizes" showFirstLastButtons></mat-paginator>

mat-paginator hidePageSize

If you don’t want to give option to select page size or want to hide the page size from the navigator we can make use of hidePageSize option.

<mat-paginator #paginator [pageSizeOptions]="pageSizes" showFirstLastButtons hidePageSize></mat-paginator>

mat-paginator pageSize

Instead of giving multiple options for page sizes, we can give fixed page size using pageSize property.

  <mat-paginator #paginator pageSize=4 showFirstLastButtons></mat-paginator>

mat-paginator showFirstLastButtons

If we add showFirstLastButtons property to mat-paginator, first and last page buttons will be visible as in the above examples.

The below code snippet won’t add first and last buttons in the paginator.

<mat-paginator #paginator pageSize=4></mat-paginator>