vue scroll table

src/components/my-table.vue

@@ -8,6 +8,7 @@
             <tr v-for="(r, ri) in rows" :key="ri">
                 <td v-for="(c, ci) in columns" :key="ci">
                     <span v-if="c.prop">{{ r[c.prop] }}</span>
+                    <span v-else-if="c.render">{{ c.render(r) }}</span>
                 </td>
             </tr>
         </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>

src/components/userlist.vue

@@ -1,18 +1,17 @@
 <template>
     <div class="Userlist">
         <h1>Userlist</h1>
-        <my-table :columns="columns" :rows="rows"></my-table>
-        <button @click="add()">add</button>
+        <scroll-table :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more"></scroll-table>
     </div>
 </template>
 
 <script>
-import MyTable from './my-table.vue';
+import ScrollTable from './scroll-table.vue';
 
 export default {
     name: "Userlist",
     components: {
-        MyTable
+        ScrollTable
     },
     data() {
         return {
@@ -24,20 +23,44 @@ export default {
                {
                    heading: 'Benutzername',
                    prop: 'Username'
+               },
+               {
+                   heading: 'Render',
+                   render(row) {
+                       return row.ID;
+                   }
                }
            ],
-           rows: [
-           ]
+           newRows: [ ],
+           hasMore: true,
+           loading: false
         }
     },
-    created() {
-        this.$store.dispatch('apiRequest', {
-            endpoint: 'users'
-        })
-            .then(rows => this.rows = rows)
-            .catch(error => {
-                console.log(error);
-            });
+    methods: {
+        more(offset, limit) {
+            this.loading = true;
+            this.$store.dispatch('apiRequest', {
+                endpoint: 'users',
+                params: {
+                    start: offset,
+                    length: limit
+                }
+            })
+                .then(rows => {
+                    this.hasMore = (rows.length >= limit);
+                    this.newRows = rows;
+                    setTimeout(() => {
+                        this.loading = false;
+                    }, 200); // for oberserver
+                })
+                .catch(error => {
+                    this.loading = false;
+                    this.hasMore = false;
+
+                    console.log(error);
+                });
+
+        }
     }
 }
 </script>

src/main.js

@@ -42,11 +42,12 @@ const store = new Vuex.Store({
   actions: {
     apiRequest(context, payload) {
       return new Promise((resolve, reject) => {
-        let endpoint = context.state.api.baseURL + payload.endpoint;
         
         Axios({
           method: payload.method ? payload.method : 'get',
-          url: endpoint,
+          baseURL: context.state.api.baseURL,
+          url: payload.endpoint,
+          params: payload.params,
           data: payload.data,
           headers: {
             'X-Auth-Token': context.state.authToken