#235 for TreeTable

src/components/treetable/TreeTable.d.ts

@@ -26,6 +26,7 @@ export declare class TreeTable extends Vue {
     defaultSortOrder?: number;
     multiSortMeta?: any[];
     sortMode?: string;
+    removableSort?: string;
     filters?: {
         [s: string]: any;
     };

src/components/treetable/TreeTable.vue

@@ -188,6 +188,10 @@ export default {
             type: String,
             default: 'single'
         },
+        removableSort: {
+            type: Boolean,
+            default: false
+        },
         filters: {
             type: Object,
             default: null
@@ -417,29 +421,40 @@ export default {
         },
         onColumnHeaderClick(event, column) {
             if (column.sortable) {
-                this.resetPage();
                 const targetNode = event.target;
+                const columnField = column.sortField || column.field;
 
                 if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
                     DomHandler.clearSelection();
 
-                    const columnField = column.field || column.sortField;
+                    if (this.sortMode === 'single') {
-                    this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
+                        if (this.d_sortField === columnField) {
-                    this.d_sortField = columnField;
+                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
-
+                                this.d_sortOrder = null;
-                    if(this.sortMode === 'multiple') {
+                                this.d_sortField = null;
-                        let metaKey = event.metaKey || event.ctrlKey;
+                            }
-                        if (!metaKey) {
+                            else {
-                            this.d_multiSortMeta = [];
+                                this.d_sortOrder = this.d_sortOrder * -1
+                            }
+                        }
+                        else {
+                            this.d_sortOrder = this.defaultSortOrder;
+                            this.d_sortField = columnField;
                         }
 
-                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
+                        this.$emit('update:sortField', this.d_sortField);
+                        this.$emit('update:sortOrder', this.d_sortOrder);
                     }
+                    else if (this.sortMode === 'multiple') {
+                        let metaKey = event.metaKey || event.ctrlKey;
+                        if (!metaKey) {
+                            this.d_multiSortMeta =  this.d_multiSortMeta.filter(meta => meta.field === columnField);
+                        }
 
-                    this.$emit('update:sortField', this.d_sortFied);
+                        this.addMultiSortField(columnField);
-                    this.$emit('update:sortOrder', this.d_sortOrder);
+                        this.$emit('update:multiSortMeta', this.d_multiSortMeta);
-                    this.$emit('update:multiSortMeta', this.d_multiSortMeta);
+                    }
 
                     this.$emit('sort', {
                         originalEvent: event,
@@ -447,22 +462,22 @@ export default {
                         sortOrder: this.d_sortOrder,
                         multiSortMeta: this.d_multiSortMeta
                     });
+                    this.resetPage();
                 }
             }
         },
-        addSortMeta(meta) {
+        addMultiSortField(field) {
-            let index = -1;
+            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
-            for (let i = 0; i < this.d_multiSortMeta.length; i++) {
-                if (this.d_multiSortMeta[i].field === meta.field) {
-                    index = i;
-                    break;
-                }
-            }
 
-            if(index >= 0)
+            if (index >= 0) {
-                this.d_multiSortMeta[index] = meta;
+                if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder))
-            else
+                    this.d_multiSortMeta.splice(index, 1);
-                this.d_multiSortMeta.push(meta);
+                else
+                    this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1};
+            }
+            else {
+                this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder});
+            }
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
         },

src/views/treetable/TreeTableDoc.vue

@@ -1393,6 +1393,12 @@ export default {
                                 <td>single</td>
                                 <td>Defines whether sorting works on single column or on multiple columns.</td>
                             </tr>
+                            <tr>
+                                <td>removableSort</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When enabled, columns can have an un-sorted state.</td>
+                            </tr>
                             <tr>
                                 <td>filters</td>
                                 <td>object</td>