Programming

Adding multiple MatPaginators to the same DataSource

This short guide is for all Angular developers using the Angular Material Library. A customer requested the following feature: Please show the (Mat)Paginator above and below all tables (which are MatTables). The problem here: You can only connect a single MatPaginator to a DataSource that holds the data for the table. First I tried to use templates to display the paginator twice on the same page, but without success. The second datepicker didn't work at all. Second, I thought about implementing the pagination logic by myself, as you do it with server-side pagination. As I had to edit several pages, this did not seem to be the best way to do it. One step before the final implementation, I also experimented with using different signals to synchronise the properties to the second paginator instance. The final solution is a bit simpler. Implementation Template: ...

Jan 22, 2025 - 23:28
 0
Adding multiple MatPaginators to the same DataSource

This short guide is for all Angular developers using the Angular Material Library. A customer requested the following feature:

Please show the (Mat)Paginator above and below all tables (which are MatTables).

The problem here: You can only connect a single MatPaginator to a DataSource that holds the data for the table.

First I tried to use templates to display the paginator twice on the same page, but without success. The second datepicker didn't work at all.

Second, I thought about implementing the pagination logic by myself, as you do it with server-side pagination. As I had to edit several pages, this did not seem to be the best way to do it.

One step before the final implementation, I also experimented with using different signals to synchronise the properties to the second paginator instance. The final solution is a bit simpler.

Implementation

Template:

 

  pageSize="50"
  [pageSizeOptions]="[10, 25, 50, 100]"
  [showFirstLastButtons]="false">


 
 mat-table [dataSource]="dataSource">...