Pagination doesn't work if used with MatTableDataSource & MatSort

[snehal2124]

Hi,

Angular version: 7.0.0

Angular Material version: 7.0.0

ngx-pagination version: 5.0.0

Description of issue: I cannot see the number of pages or traverse using Next/Prev if pagination is used with MatTableDataSource. If MatTableDataSource is skipped it works fine but I want to using MatSort feature of angular material which requires usage of MatTableDataSource.

Steps to reproduce:

1. Use mat-table and MatTableDataSource
2. Apply Pagination on table
3. Observe pagination

Expected result: Pagination should work properly.

Actual result: Pagination doesn't work

Demo: https://stackblitz.com/edit/angular-c8qkvb

[michaelbromley]

Hi,

I don't personally have any experience using the Material data-table, but from just looking over the docs it seems that the [dataSource] input is doing more than just a regular ngFor:

If a data array is provided, the table must be notified when the array's objects are added, removed, or moved. This can be done by calling the renderRows() function which will render the diff since the last table render. If the data array reference is changed, the table will automatically trigger an update to the rows.
https://material.angular.io/components/table/api#MatTable

This library is designed to work with ngFor specifically, and I can't guarantee that it integrates with other APIs providing similar functionality.

Plus it seems like the Material data table has its own pagination implementation: https://material.angular.io/components/table/overview#pagination

Why not use that one instead?

[snehal2124]

Material data table has its own pagination implementation, but the UI required it completely different.
I also tried to use renderRow but it doesn't work.

So I preferred using ngx-pagination.
Can you support mat-table as well?

[michaelbromley]

I'm afraid I won't be able to work on support myself. I do not use the Material components personally. But I am open to supporting it is someone wants to put in a pull request.

[angelopra]

Hello.

You are trying to use the pagination pipe in the MatTableDataSource. This will not work, since it is an object, not an array. What you want is to paginate its data property. That is why you assign the sliced data to dataSource.data, not the dataSource itself. So you have to think of way to provide an array with your data to the dataSource input if you want to use the pagination pipe.

Since you are using the totalItems field for the pagination pipe, I am assuming you want to do server-side pagination and sorting. In this case, I suggest you to just abandon the MatTableDataSource and provide the sorted and sliced data array directly to the dataSource input of the mat-table, and use the matSortChange output to apply your sorting behind the scenes:

<table (matSortChange)="sortChange($event)" mat-table matSort [dataSource]="data | paginate: {itemsPerPage: size, currentPage: p }">

The MatTableDataSource is a class to facilitate using the mat-table sort and pagination. If you are NOT going to use server-side pagination (and sorting), and still wants to use MatTableDataSource, my other suggestion is to use mat sort and pagination instead of the pagination pipe. Check out the material table documentation for this example: https://material.angular.io/components/table/examples#table-overview

Hope it helps.