search

GriddleGriddle / Griddle

Simple Grid Component written in React
http://griddlegriddle.github.io/Griddle/
MIT License
2.5k stars 377 forks source link

Infinite scroll with page loading #795

Open rjlasko opened 6 years ago

rjlasko commented 6 years ago

Hello Griddle devs,

A colleague recently suggested that I use Griddle for a project where I need to display a rather large amount of tabular data accessed via REST query. His prior experience was with the v0 API, and so he had successfully been able to get infinite scroll working such that when the end of the current page was reached, it automatically loaded the next page. https://griddlegriddle.github.io/v0-docs/infiniteScroll.html

In the current v1.x API, it appears that this use case is not nearly so easy to accomplish. This other issue (https://github.com/GriddleGriddle/Griddle/issues/582) indicates that infinite/virtual scrolling is supported via the PositionPlugin (as shown in story https://github.com/GriddleGriddle/Griddle/blob/44608964fbeede2e827297a253a1a5fef7c29cff/stories/index.tsx#L790). However, it is not clear from the example as to how to achieve the dynamic loading of new data as we scroll to the bottom of the currently loaded page.

I was wondering if you had an example that I could follow that would allow me to replicate this v0 functionality

Griddle version

1.11.1

Thanks! Rob

dahlbyk commented 6 years ago

Generally using Griddle with a REST response would follow this example. I haven't used PositionPlugin for anything, but it seems like it might have an internal dependency on LocalPlugin.

@joellanciaux or @ryanlanciaux would have better insight into how PositionPlugin is meant to be used.

mihirsoni commented 6 years ago

I am facing similar issue, here is demo : https://codesandbox.io/s/7nyqx4536 is there any way to expose an event if we reach to some threshold ?

@ryanlanciaux @joellanciaux @dahlbyk

dahlbyk commented 6 years ago

@mihirsoni sorry for the delayed response. I've dug a little bit more into PositionPlugin, and it doesn't seem to be set up to work without data having the full result set. The pagination events you're trying to hook into aren't being fired because they're handled at the component level (e.g. NextButtonEnhancer).

Have you worked with any other infinite-scroll components? I'm curious what the API should even look like for that.

mihirsoni commented 6 years ago

@dahlbyk

How about we assume same as grid is controlled externally and we expose callbacks ? Despite of knowing the complexity but, It would be great idea to have two configuration threshold and callback function and whenever it reaches in Dom we should just have callBack.

I feel this is seems must feature.

dahlbyk commented 6 years ago

I agree this would be a nice feature, but I don't believe any of the core team have free time to work on it. We would be glad to assist anyone interested in implementing this.

mihirsoni commented 6 years ago

@dahlbyk It would be great to post some approaches and guidance from core team how it would look like.

dahlbyk commented 6 years ago

@mihirsoni I would suggest looking at other grids that support infinite scroll (e.g. ag-Grid Infinite Scrolling).

I would start by adding a getData callback to position settings that receives parameters along the lines of ag-Grid's IGetRowsParams. If getData is not provided, the plugin would fall back on the existing behavior of assuming data is local.