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;
}

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

mat table pagination example
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 hide pagesize
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 fixed pagesize
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>
