vue scroll table

package-lock.json

@@ -741,6 +741,23 @@
         "babel-types": "6.26.0"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "core-js": "2.5.0",
+        "regenerator-runtime": "0.10.5"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "babel-preset-es2015": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
@@ -792,7 +809,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "2.5.0",
         "regenerator-runtime": "0.11.0"
@@ -1480,8 +1496,7 @@
     "core-js": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.0.tgz",
-      "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=",
+      "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY="
-      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3168,6 +3183,11 @@
       "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
       "dev": true
     },
+    "intersection-observer": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.4.0.tgz",
+      "integrity": "sha512-hBECeRcNPMrQP02IlicMCDiL19KQweoWukv35juIVehB2lE+spel5UyfTux/YCkXaR8Zz0jq3xMZeWYZBAU2SA=="
+    },
     "invariant": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
@@ -5948,8 +5968,7 @@
     "regenerator-runtime": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
-      "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==",
+      "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -6973,6 +6992,11 @@
         "vue-template-es2015-compiler": "1.5.3"
       }
     },
+    "vue-observe-visibility": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.1.3.tgz",
+      "integrity": "sha1-wvD8tchtWuJE9Tx+KPpjWg24ujY="
+    },
     "vue-router": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-2.7.0.tgz",

package.json

@@ -30,7 +30,10 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "babel-polyfill": "^6.26.0",
+    "intersection-observer": "^0.4.0",
     "vue": "^2.4.2",
+    "vue-observe-visibility": "^0.1.3",
     "vue-router": "^2.7.0",
     "vuex": "^2.3.1"
   },

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>
+        <scroll-table :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more"></scroll-table>
-        <button @click="add()">add</button>
     </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() {
+    methods: {
-        this.$store.dispatch('apiRequest', {
+        more(offset, limit) {
-            endpoint: 'users'
+            this.loading = true;
-        })
+            this.$store.dispatch('apiRequest', {
-            .then(rows => this.rows = rows)
+                endpoint: 'users',
-            .catch(error => {
+                params: {
-                console.log(error);
+                    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

webpack.config.js

@@ -34,7 +34,11 @@ if (env === 'production') {
 
 // Main Settings config
 module.exports = {
-  entry: entryPoint,
+  entry: [
+    'intersection-observer',
+    'babel-polyfill', 
+    entryPoint
+  ],
   devtool: 'source-map',
   output: {
     path: exportPath,