React-table: Infinite Scrolling

[mlukaszczyk]

Hey @tannerlinsley,

thanks for the great table component!

One question:
Is it possible to change the pagination logic to implement infinite scrolling? I would need something like an onScrolledToBottom handler on rt-tbody to fetch more items. I have a fixed height on the rt-tbody with an overflow: scroll.

Cheers,

Michael

[tannerlinsley]

Standard vertical and/or infinite scrolling are not yet supported. There are several reasons for this, the main one being the performance and simplicity of a small and easy to understand codebase. We're currently investigating the possibility of it though. I'll post back here when and if we decide to go forward with any plans.

[mjaveddd]

Would love to see infinite scroll implemented on this table! This post is from February, is there any update on implementing infinite scroll?

[gary-menzel]

You probably need to hear from @tannerlinsley direct but there were recent discussions in the slack channels and I doubt this will be added to react-table.

[nabeel95]

This library is awesome. Apart from just infinite scrolling feature.
Why can't you add infinite scroll as well?

[gary-menzel]

The reasons are basically what @tannerlinsley has already described. It is technically challenging to get a performant infinite scroll and keep the code base small and easy to manage (and the design considerations are very different to a paged solution - which is what #react-table currently is). If infinite scroll of "finite" data is a major use case for users then the current incarnation of #react-table is unlikely to have it in the near future and is probably better served by a different solution.

At present, #react-table does support progressive page loading via the onFetchData and calling back server-side (or to an external cache in the browser) to ensure minimal data in the rendering side of things. But the #react-table design is NOT based on a "scrolling" table despite there being a height property to create a scrollbar (which probably gives a misleading impression that infinite scrolling would be easy to do).

[coffenbacher]

I'm not sure if I'm in the right issue or not, but I'm basically looking for a subset of this issue: simply performant rendering of a grid (thousands of items) with scrolling instead of pagination.

Dropping in something like the <Infinite> HOC from react-infinite would be really nice, but I'm not sure how to do this at the moment.

[gary-menzel]

A scrolling grid of thousand of items is just not going to be performant. ReactTable is page-based because that is the best way to get a performant table with a lot of rows (as well as fetching the data page by page).

If that is a major use-case for your application then ReactTable is not the right tool for the job.

[coffenbacher]

I disagree with that, it's certainly possible to have a scrolling grid with thousands of items that's performant. The key is to simply not render the rows to the DOM until they become relevant. So at any given time there are <50 rows rendered. This approach is extremely efficient in practice, I've used it before in custom tables I've written and it was both very easy to do and very performant.

https://github.com/seatgeek/react-infinite
http://chairnerd.seatgeek.com/react-infinite-a-browser-ready-efficient-scrolling-container-based-on-uitableview/

[gary-menzel]

You are welcome to submit a PR if you believe this can be implemented within the current architectural design as long as the core principles of the design remain the same. The design of ReactTable is deliberately page-based and already has the ability to fetch large volumes of data from an external source (onFetchData) with the ability to so the filtering, sorting and page management outside of the component.

There are no plans by the owner to implement infinite scrolling.

[clikman007]

Hi, @coffenbacher. For implimentation autoload data (infinity load) you can use component Waypoint from package react-waypoint
https://github.com/brigade/react-waypoint
On this page it's example how do what you want: http://brigade.github.io/react-waypoint/
In my case i use code:

                <ReactTable
                    data = {this.state.data}
                    columns={columns}
                    loading={this.state.loading}
                    manual
                    showPagination={false}                   
                />
                <Waypoint
                    onEnter={this.loadData}
                    onLeave={this.loadDataEnd}
                    bottomOffset='-200px'                   
                />

[gary-menzel]

I am actually going to lock this issue as it really isn't relevant to the current version of ReactTable (which is not set up to do what the original author has asked). There will be a completely thought out and well-designed solution if auto-load is ever implemented (there is no such thing as "infinite" scrolling as data is not "infinite" because databases are not "infinite").