Infinite scroll for Ant Table

What problem does this feature solve?

As great as ant’s pagination is, it is also something that is not very modern. I’d like to wrap the table in a infinite scroll that would make ajax request and fetch more rows upon scrolling (Refer here). This is a simple example of creating such a table.

What does the proposed API look like?

To be honest, am not too sure at this point.

For a start we could wrap the Table in an InfiniteLoader HOC and have a event handler prop on the table onScroll that is triggered when the table is scrolled. The purpose of the InfiniteLoader would be to help break large data sets down into chunks that could be just-in-time loaded as they were scrolled into view.

I’ll be happy to send forth a PR if you think this might be useful. If not, please feel free to close this item.

[burubur]

Wohoo, it is very easy to implement dynamic rows loading/infinite scrolling on antd table, I can chunk the httpRequest with this code:

componentDidMount() {
...
var tableContent = document.querySelector('.ant-table-body')
    tableContent.addEventListener('scroll', (event) => {
      // checking whether a selector is well defined
      console.log('yes, I am listening')
      let maxScroll = event.target.scrollHeight - event.target.clientHeight
      let currentScroll = event.target.scrollTop
      if (currentScroll === maxScroll) {
         // load more data
      }
    })
...
}

[benjycui]

I don’t think this feature should be included in antd. For it’s hard to decide that which element’s scroll events we should listen to.

And you can implement this in your own component easily.