Sort Table & Pagination

Learn how to sort data in a table and implement pagination in an Angular application.

We'll cover the following

We have created a nice-looking table, but it lacks a pretty standard functionality—sorting. We would typically expect that if we click the header, it will sort data into ascending and descending order, and it will be able to recognize common data types, such as text and numbers, and sort them properly. The good news is that Angular Material can help us achieve this behavior.

Sorting table

We need to use the appropriate Angular Material directives for the job:

  1. Open the products.module.ts file and import MatSortModule from the @angular/
    material/sort     namespace. Add it also in the imports array of the @NgModule decorator.

  2. MatSortModule exports a variety of directives that can be used to sort a table. Open the product-list.component.html file and add the matSort and matSortDisableClear directives to the <table> element on line 1 and the mat-sort-header directive to each header cell:

Get hands-on with 1400+ tech skills courses.