vue scroll table

src/components/scroll-table.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="Scroll-Table">
+        <my-table :columns="columns" :rows="rows"></my-table>
+        <div v-show="hasMore" v-if="!loading" v-observe-visibility="visibilityChanged">...</div>
+        <div v-if="loading">loading...</div>
+    </div>
+</template>
+
+<script>
+import MyTable from './my-table.vue';
+
+import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
+
+export default {
+   name: "ScrollTable",
+    directives: {
+        ObserveVisibility
+    },
+    components: {
+        MyTable
+    },
+    props: {
+       columns: {
+           type: Array,
+           default() {
+                return [ ];
+           }
+       },
+       newRows: {
+           type: Array,
+           default() {
+                return [ ];
+           }
+       },
+       offset: {
+           type: Number,
+           default: 0
+       },
+       limit: {
+           type: Number,
+           default: 10
+       },
+       loading: {
+           type: Boolean,
+           default: false
+       },
+       hasMore: {
+           type: Boolean,
+           default: true
+       },
+       handler: {
+           type: Function,
+           default: () => {}
+       }
+    },
+    watch: {
+        newRows(rows) {
+            rows.forEach(row => {
+                this.rows.push(row)
+            });
+            this.currentOffset += rows.length;
+        }
+    },
+    data() {
+        return {
+            rows: [ ],
+            currentOffset: this.offset
+        }
+    },
+    methods: {
+        visibilityChanged(isVisible, entry) {
+            if (isVisible) {
+                // infinite scrolling
+                this.handler(this.currentOffset, this.limit);
+            }
+        }
+    }
+}
+
+</script>