ngx-pagination with Angular Material Table

[dnfesenk]

Angular version: 7.0.0

ngx-pagination version: 3.2.1

Description of issue: with Material Table, if config of pagination pipe like this: | paginate: {itemsPerPage: less than number of columns, currentPage: p, totalItems: equals than number of columns}, displays number of rows like number of columns, but number of columns must not to be changed

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

[michaelbromley]

Hi,

I took a look at your demo, but I'm not familiar with Material Table and I don't really understand what you are trying to do here:

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns | paginate: {itemsPerPage: size, currentPage: p }"></tr>

I suspect that the behaviour you report is related to the logic above, rather than a particular issue of this library.

If you can reduce your example down to a specific issue with this lib, please let me know.

[dnfesenk]

Thanks for quick reply!

I don't really understand what you are trying to do here

I try to paginate the displayed data on server side (not in demo). I changed the demo, and now all works correctly (look on it) But if you reduce the data array on 2 rows, like this

data: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}
];

(when total counts of elements equals of columns number), pagination will works incorrect. And only in this case.

[michaelbromley]

Aha, I think I know the reason:

https://github.com/michaelbromley/ngx-pagination/blob/ec1249e42536e0f669b6762efef9fec776f038f8/src/paginate.pipe.ts#L46

This is the logic used to figure out whether we are in "server paginated mode" or "in-memory paginated mode". Looks like you found an edge case which results in buggy behaviour.

[codigoperdido]

Is this issue resolved yet?

[michaelbromley]

Nope. I did look into it when I made some recent updates to the lib, but I could not clearly understand how to reproduce it.

If someone can provide a really simple and clear reproduction, I'll have another go.

[NileshPatel17]

@dnfesenk I think, you are using the pipe incorrectly. It should be apply to the dataSource, not to the row.

<table mat-table [dataSource]="dataSource | paginate: {itemsPerPage: size, currentPage: p, totalItems: data.length}" class="mat-elevation-z8">

check it out: https://stackblitz.com/edit/angular-htpcji

[desidude03]

@michaelbromley @dnfesenk this pagination works fine for static table which is been defined in component.ts but m looking serverside listing i.e the data is been save using laravel in mysql.

[Shruti1Jain]

is it possible to implement pagination without using slicing.

[Shruti1Jain]

because in my case if i am declaring( datasource:any ;) , it doesn't implement search funactionality.

[tanhuazh]

I had this problem too, ends up hacking it with a dummy list and remove pagination pipe from table:

<span>
  <span *ngFor="let item of dataSource.data | paginate: { itemsPerPage: size, currentPage: pageIndex, totalItems: allData.length};"></span>
</span>