orderBy table

src/components/my-table.vue

@@ -4,7 +4,10 @@
         <table>
             <thead>
                 <tr>
-                    <th v-for="(c, i) in columns" :key="i">{{ c.heading }}</th>
+                    <th v-for="(c, i) in columns" :key="i">
+                        <span @click="orderBy(c.orderBy)" v-if="c.orderBy">{{ c.heading }} V</span>
+                        <span v-else>{{ c.heading }}</span>
+                    </th>
                 </tr>
             </thead>
             <tbody is="transition-group" name="list">
@@ -40,6 +43,15 @@ export default {
     data() {
         return {
         }
+    },
+    methods: {
+        orderBy(col) {
+            console.log(col);
+            this.$emit('sort', {
+                orderBy: col,
+                orderDesc: false
+            });
+        }
     }
 }
 </script>

src/components/scroll-table.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="Scroll-Table">
-        <my-table :columns="columns" :rows="rows"></my-table>
+        <my-table :columns="columns" :rows="rows" @sort="sort"></my-table>
         <div v-if="loadingDelayed">loading...</div>
         <div style="padding-left: 30%; padding-bottom: 100px;">
-            <span v-show="hasMore" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
+            <span v-show="hasMore || sortTriggered" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
         </div>
     </div>
 </template>
@@ -42,6 +42,13 @@ export default {
            type: Number,
            default: 10
        },
+       orderBy: {
+           type: String
+       },
+       orderDesc: {
+           type: Boolean,
+           default: false
+       },
        loading: {
            type: Boolean,
            default: false
@@ -79,14 +86,18 @@ export default {
             rows: [ ],
             rowsToPush: [ ],
             currentOffset: this.offset,
-            loadingDelayed: false
+            currentOrderBy: this.orderBy,
+            currentOrderDesc: this.orderDesc,
+            loadingDelayed: false,
+            sortTriggered: false
         }
     },
     methods: {
         visibilityChanged(isVisible, entry) {
             if (isVisible) {
                 // infinite scrolling
-                this.handler(this.currentOffset, this.limit);
+                this.sortTriggered = false;
+                this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc);
             }
         },
         pushRows() {
@@ -97,6 +108,22 @@ export default {
                     this.pushRows();
                 }, 50);
             }
+        },
+        clear() {
+            this.currentOffset = 0;
+            this.rows = [];
+            this.rowsToPush = [];
+        },
+        sort(e) {
+            if (e.orderBy == this.currentOrderBy) {
+                this.currentOrderDesc = !this.currentOrderDesc;
+            } else {
+                this.currentOrderDesc = false;
+            }
+            this.currentOrderBy = e.orderBy;
+            console.log(e);
+            this.sortTriggered = true;
+            this.clear();
         }
     }
 }

src/components/userlist.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="Userlist">
         <h1>Userlist</h1>
-        <scroll-table :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more"></scroll-table>
+        <scroll-table :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="id" :orderDesc="true"></scroll-table>
     </div>
 </template>
 
@@ -18,11 +18,13 @@ export default {
            columns: [
                {
                    heading: 'ID',
-                   prop: 'ID'
+                   prop: 'ID',
+                   orderBy: 'id'
                },
                {
                    heading: 'Benutzername',
-                   prop: 'Username'
+                   prop: 'Username',
+                   orderBy: 'username'
                },
                {
                    heading: 'Render',
@@ -37,13 +39,15 @@ export default {
         }
     },
     methods: {
-        more(offset, limit) {
+        more(offset, limit, orderBy, orderDesc) {
             this.loading = true;
             this.$store.dispatch('apiRequest', {
                 endpoint: 'users',
                 params: {
                     start: offset,
-                    length: limit
+                    length: limit,
+                    orderBy,
+                    orderDesc
                 }
             })
                 .then(rows => {