Vuetify: [Feature Request] Infinite scrolling in lists / tables

[vBandiTv]

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.

[skjortan23]

Would love to see this integrated into the data table component.

[nseb]

+1
not planned ?

[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.

[Sabbir-Noire]

@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

[msalahz]

Any updates about this, I would really love to see this supported

[gedkirkham]

@msalahz

Any updates about this, I would really love to see this supported

Take a look at @marceloavf comment.

I gave my table a fixed height. Added as the last element in my table, and then put a watcher on 'isIntersect'. Once 'isIntersect' is true, trigger an REST API call.

[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.