orderBy table

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();
         }
     }
 }