Implement sorting in server datasource

Author: coderdiaz

src/components/ServerDatasource.vue

@@ -1,7 +1,9 @@
 <script>
-import DatasourceUtils from '../utils/DatasourceUtils'
+import DatasourceUtils from '@/utils/DatasourceUtils'
 import Pagination from './Pagination'
-import {EventBus} from '../utils/EventBus'
+import {EventBus} from '@/utils/EventBus'
+import IconAsc from '@/assets/icon-asc.png'
+import IconDesc from '@/assets/icon-desc.png'
 export default {
   name: 'ServerDatasource',
   components: {Pagination},
@@ -124,7 +126,11 @@ export default {
       current_page: 1,
       selected: null, // row and Object selected on click event
       indexSelected: -1, // index row selected on click event
-      search: '' // word to search in the table,
+      search: '', // word to search in the table,
+      columnSortSelected: { // Object to set a column sort data
+        key: null,
+        order: true
+      }
     }
   },
   computed: {
@@ -134,8 +140,20 @@ export default {
       })
     },
     columnItems () {
+      let showArrows = (key) => {
+        return (this.shouldShowUpArrow(key)) ? <img src={IconDesc} width="15"/>
+          : <img src={IconAsc} width="15"/>
+      }
+
       return this.columns.map((column, index) => {
-        return <th>{column.name}</th>
+        if (column.order) {
+          return <th on-click={(e) => this.sortColumn(e, column.key)}>
+            {column.name}
+            <span class="vue-server-arrows">{showArrows(column.key)}</span>
+          </th>
+        } else {
+          return <th>{column.name}</th>
+        }
       })
     },
     columnObjects () {
@@ -182,7 +200,10 @@ export default {
       this.indexSelected = -1
       this.current_page = 1
       this.$emit('searching', e.target.value)
-    }
+    },
+    sortColumn: DatasourceUtils.sortColumn,
+    shouldShowUpArrow: DatasourceUtils.shouldShowUpArrow,
+    shouldShowDownArrow: DatasourceUtils.shouldShowDownArrow
   },
   watch: {
     /**
@@ -208,8 +229,16 @@ export default {
     position: relative;
     padding: 0;
   }
+  .vue-server-arrows {
+    position: absolute;
+    right: 0;
+    top: 6px;
+  }
   table {
     margin-bottom: 0;
+    th {
+      position: relative;
+    }
   }
   .panel-footer {
     .btn-group-actions {