Infinite scrolling

I’m submitting a feature request

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior? When pulling data from an API, it’d be beneficial to auto-load the data once the scrollbar is at a certain percentage. The user wouldn’t have to click next for separate pages.

Please tell us about your environment:

• Table version: 0.7.x

• Angular version: 2.0.x

• Browser: all

• Language: all

[ychaikin]

Offset is a 0 based number and represents the actual pagination I need to request to the server. The page is a 1 based number that reflects the actual ui position on the page. You can use these exclusive of each other to prefetch pages ahead of the actual page the user is on.

With the event.pageSize=7, the offset changes from 0 to 1 when I scroll down when the 8th row is fully shown. Almost like the description you gave for the ui position on the page instead of what I need to request from the server.

So, what do I look for to know to request the next 7 rows from the server? I can prefetch 14 rows (first 2 pages), but how will I know when the user is getting to close to the last few rows already pre-fetched.

I must admit that I dug into the code and did something slightly drastic to accomplish this. Feels like a leaky abstraction to me, but it works:

<ngx-datatable #table
        ...
        [scrollbarV]="true"
        (page)='onPage($event, table.bodyComponent.indexes)'>

Then, in component code:

currentlyLoadedPage = 0;
onPage(event: any, indexes: any) {
    // not precise, but close enough for now
    const totalShown = (this.currentlyLoadedPage + 1) * this.pageSize;
    const percentScrolled = indexes.last / (totalShown / 100);
    
    // pre-fetch the next page
    if (percentScrolled > 80) {
      this.currentlyLoadedPage++;
      this.addPage(this.currentlyLoadedPage);
    }
  }

[mulgurul]

Hi guys

I noticed that in the demo on a desktop browser, then scrolling using the arrows with a row marked, I get stuck on page 7 when trying to scrool back. Is this by design? So I reach end of data at page 8, and can scroll one page back to top of page seven. If this is a bug, then I can’t use this mode in my current project where I need real pageless/infinite scrolling.

Nb I’m using Chrome 84.0.4147.135 64bit on Windows, but I’ll do some more testing with mobile device, other browsers etc.

Thanks