I got infinite scroll working, but it's far from perfect, hoping we can get this working together

[vesper8]

So I was watching this tutorial on Laracasts on how to get Infinite scroll working with Vue

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/46

And it got me thinking about this problem again because I have wanted to use infinite scrolling with vue-tables-2 for months

Well now I have it working sort of. I re-used the LoadMore component from the laracasts tutorial which I'm happy to share here

<script>
import { throttle } from 'lodash';

export default {

  template: '<div></div>',

  props: {
    container: {},
  },

  mounted() {
    window.addEventListener('scroll', this.loadMore);
  },

  methods: {
    loadMore: throttle(function () {
      if (this.shouldLoadMore()) {
        this.$emit('ready');
      }
    }, 300),

    shouldLoadMore() {
      const containerHeight = $(this.container).height();

      const distanceFromWindowTop = $(this.container).offset().top;

      const userIsNearBottom = window.pageYOffset >=
        (distanceFromWindowTop + containerHeight) * 0.7;

      return userIsNearBottom;
    },

  },
};

</script>

And then inside my component that hosts my v-server-table I made these few tweaks:

<template>
    <div>
        <div class="search-list" id="search-list">

            <v-server-table :url="url" :name="name" :columns="tableColumns" :options="tableOptions" :ref="tableRef" @loaded="onLoaded" />

        </div>
        <LoadMore container="#search-list" @ready="loadMore" />
    </div>
</template>

<script>
  data() {
    return {
      limit: 12,
      scrollListenerActive: false,
      ...
    };
  },

  methods: {
    onLoaded() {
      this.scrollListenerActive = true;
    },

    loadMore() {
        if (this.scrollListenerActive && this.limit < this.searchCount) {
          this.scrollListenerActive = false;
          this.limit = this.limit + 12;
          this.$refs[this.name].setLimit(this.limit);
        }
    },

  },

</script>

By the way, searchCount is a computed property that has the total number of records for the filtered search.

So there you go.. voila.. it works perfectly.. when the user scrolls down to 70% of the page, it seamlessly increase the page limit to give the impression that it just stacked an additional 12 records below. Needs a bit more validation and I'll probably just hide the pagination altogether when using this.

Now the one real problem with this approach however is that every time it increases the page limit, it creates a request to the API which returns an increasingly bigger and bigger result set.. since in my case I have 800 records.. that means if the user keeps scrolling to the bottom.. everything will appear to work perfectly for him but on the back-end the requests are getting bigger until they are huge. This is problematic for so many reasons obviously.

And this is where I am hoping @matfish2 can take part of this simple solution and maybe add a new type of option, similar to what Algolia's vue-instantsearch prop called "stack" https://community.algolia.com/vue-instantsearch/components/results.html#props

Where instead of fetching the whole result set, it just gets the next page but stacks it at the bottom of the current page instead of replacing it (current vue-tables-2 behaviour)

Well I realize this may require some bigger underlying changes only to get the same results I just achieved but in an actually sustainable and optimized way... but here's to hoping I can revive the desire for proper infinite scrolling in this amazing library :)

[vesper8]

You can see it in action right here in this video I made on my dev.

This is not your typical-looking vue-tables-2 table but it is indeed a vue-tables-2 table which I have modified to work like a grid. I use filters, search, vuex, and lots more goodies that vue-tables-2 provides

https://www.dropbox.com/s/4c97p8cos7eqqps/InfiniteScrollVueTables2.mp4?dl=0

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.