Fixed #235 - Removable sort on DataTable

src/components/datatable/DataTable.d.ts

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

src/components/datatable/DataTable.vue

@@ -222,6 +222,10 @@ export default {
             type: String,
             default: 'single'
         },
+        removableSort: {
+            type: Boolean,
+            default: false
+        },
         filters: {
             type: Object,
             default: null
@@ -475,24 +479,35 @@ export default {
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
                     DomHandler.clearSelection();
 
-                    this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
+                    if (this.sortMode === 'single') {
-                    this.d_sortField = columnField;
+                        if (this.d_sortField === columnField) {
-
+                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
-                    if(this.sortMode === 'multiple') {
+                                this.d_sortOrder = null;
-                        let metaKey = event.metaKey || event.ctrlKey;
+                                this.d_sortField = null;
-                        if (!metaKey) {
-                            this.d_multiSortMeta = [];
                             }
-
+                            else {
-                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
+                                this.d_sortOrder = this.d_sortOrder * -1
+                            }
+                        }
+                        else {
+                            this.d_sortOrder = this.defaultSortOrder;
+                            this.d_sortField = columnField;
                         }
 
                         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.addMultiSortField(columnField);
                         this.$emit('update:multiSortMeta', this.d_multiSortMeta);
+                    }
 
                     this.$emit('sort', this.createLazyLoadEvent(event));
-
                     this.resetPage();
                 }
             }
@@ -551,19 +566,18 @@ export default {
 
             return (this.d_multiSortMeta[index].order * result);
         },
-        addSortMeta(meta) {
+        addMultiSortField(field, metaKey) {
-            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))
+                    this.d_multiSortMeta.splice(index, 1);
                 else
-                this.d_multiSortMeta.push(meta);
+                    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/datatable/DataTableDoc.vue

@@ -1819,6 +1819,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>

src/views/datatable/DataTableSortDemo.vue

@@ -33,6 +33,14 @@
                 <Column field="brand" header="Brand" :sortable="true"></Column>
                 <Column field="color" header="Color" :sortable="true"></Column>
             </DataTable>
+
+            <h3>Removable Sort</h3>
+			<DataTable :value="cars" removableSort>
+                <Column field="vin" header="Vin" :sortable="true"></Column>
+                <Column field="year" header="Year" :sortable="true"></Column>
+                <Column field="brand" header="Brand" :sortable="true"></Column>
+                <Column field="color" header="Color" :sortable="true"></Column>
+            </DataTable>
 		</div>
 
         <div class="content-section documentation">
@@ -63,6 +71,14 @@
     &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
+
+&lt;h3&gt;Removable Sort&lt;/h3&gt;
+&lt;DataTable :value="cars" removableSort&gt;
+    &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
 </template>
 </CodeHighlight>