[Feature Request] Infinite scrolling in lists / tables

[fima-taf]

New Functionality

Currently there is no support for infinite scrolling, only normal pagination (by pages).
Infinite scrolling is being used in many apps / websites / supported by many frameworks and gaining popularity pretty fast.
Scroll in a list / table until you reach the bottom of the list / table and then load another bulk of items instead of splitting it into pages.

Improvements

• No need to mess with pagination, pages, filters, etc.
• Can avoid bugs related to pages / filters.
• High popularity.
• Cleaner view.

Bugs or Edge Cases it Helps Avoid

I think it can reduce the amount of bugs related to traditional pagination, but i don't think it will produce more bugs.

[scp-nm]

I'm not sure Vuetify needs this as there are plenty of libraries out there already. Today I implemented https://github.com/egoist/vue-mugen-scroll on a list without too much hassle, and was even able to utilise the Vuetify progress component. Just my 2c...

[0ip]

@scp-nm There certainly are libraries that work quite well for infinite scrolling, like https://github.com/wangdahoo/vue-scroller or the one you mentioned, but they lack a "pull to refresh" functionality that also works at the bottom of a list. I haven't found any component that supports this feature and works with Vuetify.

[Twinsen343]

this would be a great feature, pagination in my limited knowledge seems a bit old school - especially in projects who have moved away from datatables and into cards
EDIT:
So you can sort of do your own infinite scroll if you have all desired items in an array -> Spice your array by an initial offset and just put on a simple watch function to detect if at bottom of page if at bottom of page then just increase your offset by X amount and show a spinner if desired -> this achieves the same result to the end-user by having all data there but not getting the performance hit by rendering everything at once.

[sab-exp]

@Twinsen343 How do you detect the bottom of the pages in mobile ? For PC, this code works but not for mobile:
let element = document.documentElement
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
if (bottomOfWindow) { //appending data to the array }

[jimmywarting]

@Sabbir-Noire a good infinity pagination would use Intersection Observer API on both phone and desktop and not doing any calculations based on offsetHeight

[marceloavf]

I think this now should be easier with the new v-intersect (directive) in vuetify

[johnleider]

This is something that we intend to implement using our v-virtual-scroller component. It was introduced very late into the game though and proved to be more difficult than expected to integrate into existing features. Thank you for your patience.

If you have any additional questions, please reach out to us in our Discord community.

[mrodal]

Hi, for the time being, I made a simple InfiniteScroll component that can work as is or as base for someone who needs more functionality. Maybe it can be useful to someone

Here it is:
https://gist.github.com/mrodal/56952b72f6d378b3c263da506d002289