Any ideal how to implement infinity scroll function?

[xhe]

Hello, I need to implement infinity scroll features for fixed data table. I checked API doc, there is no events dispatched when user scroll to the end of the table. The only seemly helpful event is onScrollEnd, but that event gives me back scrollX and scrollY. ScrollY is pretty huge, I don't know how to use this number to detect user is scrolling near the end. Can anyone tell me how I can implement infinity scroll feature using fixed data table? Thanks

[3cooper]

The way we did it was in the method that creates cells. We only have a quick prototype currently that I need to clean up. The gist is that when we render the first cell of the last row, we kick off a request to get more rows. You need to take into account rendering that cell multiple times and if that cell is visible without scrolling - meaning if you only have like 5 rows you will kick off another request for an empty page.

[xhe]

My solution is: if the scrollY is greater or equal of total height, which is the row height

• lengthOfRows, then it is approaching end.

_onScrollEndCallBack: function(scrollX, scrollY){

if( this.state.rowHeight*(this.state.dataList.length-1)-this.state.tableHeight

<= scrollY ){

  console.log("appraching bottom");

}

}

Do you think if this is reliable or not?

On Fri, Apr 22, 2016 at 5:55 AM, 3cooper notifications@github.com wrote:

The way we did it was in the method that creates cells. We only have a quick prototype currently that I need to clean up. The gist is that when we render the first cell of the last row, we kick off a request to get more rows. You need to take into account rendering that cell multiple times and if that cell is visible without scrolling - meaning if you only have like 5 rows you will kick off another request for an empty page.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/facebook/fixed-data-table/issues/385#issuecomment-213417135

[3cooper]

Sorry, but I don't know enough about scrolling and how the table handles it to say.

[3cooper]

One issue with this could be variable row heights.

[xhe]

But based on the configuration, each row has fixed height, and row position is absolute. I tried to change position for each row from absolute to relative, then the effect is terrible. Is absolute position mandatory for fixed data table? if that is true, then the calculation should be ok. Any idea?

On Tue, Apr 26, 2016 at 8:18 AM, 3cooper notifications@github.com wrote:

One issue with this could be variable row heights.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/facebook/fixed-data-table/issues/385#issuecomment-214780097

[3cooper]

I think it is mandatory, but I could be wrong. I am now in need of a new infinity scrolling solution since I was updating state in a render method. Redux is complaining about this.

[xhe]

Complaining what, the various row height? If position and row are already fixed, then, total height should also be fixed. I actually met one more issue, that is clickable cell, once a certain cell is clicked, it will expand some contents below it. Now my solution is only to hack into html and insert content, but I have to hide following rows, otherwise, the inserted html can not be shown. This is all because the absolution position for each row, and they can NOT be pushed down automatically. But I think this has made the total height accurate and we can use scrollY to detect if it is approaching bottom

On Tue, Apr 26, 2016 at 8:30 AM, 3cooper notifications@github.com wrote:

I think it is mandatory, but I could be wrong. I am now in need of a new infinity scrolling solution since I was updating state in a render method. Redux is complaining about this.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/facebook/fixed-data-table/issues/385#issuecomment-214783932

[deepakmenon]

Hi, I was trying to implement infinity scrolling based on the approach specified by xhe..things seems to work as expected...but then i could not find this.state property withing my _onScrollEndCallBack method..I am trying to implement react redux table.any info will be appreciated ..

[eriknyk]

I've tried to found an example for this, and after wait a lot of time without answers I decided to make and example to implement Infinite scroll datatable, maybe we can discuss with this example, as starting point. (Comments, suggestion, pull requests are welcome!)

https://github.com/eriknyk/fixed-datatable-infinite-scroll

Best Regards.