ng2-smart-table 在滚动时加载数据

Question

i want to load data on scroll. scroll is applied ng-card.

 <nb-card> <nb-card-body class="patientInfoStyle"> <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"> </ng2-smart-table> </nb-card-body> </nb-card>

Thanks in advance.

Answer 1

You may do this easily using ngx-infinite scroll .

There is also an interest solution when it comes to image lazy loading. Follow this

Answer 2

This is not exactly the answer you were looking for but you can do the following:

• open github account
• go to ng2-smart-table git and fork to your repository
• checkout library using the provided link using git clone
• add infinite scroll using any library of your choosing (ngx-infinite scroll, angular material, etc.)
• you can follow this guide in order to package your library to github and use it from package json in your project.

In my case I used Angular Material cdk . In order to use it with table in the library do the following:

• wrap external table element with cdk
• in the tbody component replace * ngFor on 'tr' element with * cdkVirtualFor

The code written by the author has good practices and easy to read. doing it yourself is not too difficult. Also by doing above you can repeat this method with any open source libraries

Answer 3

I followed @olNoy advise and I created an alpha version of ng2-smart-table with scrolling of the body using angular-cdk scrolling.

You could find it at https://github.com/andreatoppan/ng2-smart-table it is quite rude but I wanted to share if someone is interested, as it is working in my case.

I treated the head and the body as 2 different tables, placing a cdk-virtual-scroll-viewport outside the tbody. This way the head will remain in place and the body could scroll over. The drawback of this approach is that the head and body column will be different, this is why I placed another head inside the second table and I created some not optimised functions to adjust the columns size in the component. If you find it useful you could expand or fix at your wish.