ability to disable multiple column sort. fixes #791

xaksis · Mar 2, 2021 · 908add4 · 908add4
1 parent 20068fc
commit 908add4
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 21 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -28,6 +28,7 @@
       styleClass="vgt-table bordered"
       :sort-options="{
         enabled: true,
+        multipleColumns: false,
       }"
       :search-options="{
         enabled: true,

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -89,6 +89,7 @@
             :all-selected-indeterminate="allSelectedIndeterminate"
             :mode="mode"
             :sortable="sortable"
+            :multiple-column-sort="multipleColumnSort"
             :typed-columns="typedColumns"
             :getClasses="getClasses"
             :searchEnabled="searchEnabled"
@@ -145,6 +146,7 @@
             :all-selected-indeterminate="allSelectedIndeterminate"
             :mode="mode"
             :sortable="sortable"
+            :multiple-column-sort="multipleColumnSort"
             :typed-columns="typedColumns"
             :getClasses="getClasses"
             :searchEnabled="searchEnabled"
@@ -407,6 +409,7 @@ export default {
       default() {
         return {
           enabled: true,
+          multipleColumns: true,
           initialSortBy: {},
         };
       },
@@ -470,6 +473,7 @@ export default {
     // internal sort options
     sortable: true,
     defaultSortBy: null,
+    multipleColumnSort: true,
 
     // internal search options
     searchEnabled: false,
@@ -1577,12 +1581,16 @@ export default {
     },
 
     initializeSort() {
-      const { enabled, initialSortBy } = this.sortOptions;
+      const { enabled, initialSortBy, multipleColumns } = this.sortOptions;
 
       if (typeof enabled === 'boolean') {
         this.sortable = enabled;
       }
 
+      if (typeof multipleColumns === 'boolean') {
+        this.multipleColumnSort = multipleColumns;
+      }
+
       //* initialSortBy can be an array or an object
       if (typeof initialSortBy === 'object') {
         const ref = this.fixedHeader

diff --git a/src/components/VgtTableHeader.vue b/src/components/VgtTableHeader.vue
@@ -89,17 +89,11 @@ export default {
     sortable: {
       type: Boolean,
     },
-    // sortColumn: {
-    //   type: Number,
-    // },
-    // sortType: {
-    //   type: String,
-    // },
+    multipleColumnSort: {
+      type: Boolean,
+      default: true,
+    },
 
-    // utility functions
-    // isSortableColumn: {
-    //   type: Function,
-    // },
     getClasses: {
       type: Function,
     },
@@ -163,7 +157,7 @@ export default {
       //* if column is not sortable, return right here
       if (!this.isSortableColumn(column)) return;
 
-      if (e.shiftKey) {
+      if (e.shiftKey && this.multipleColumnSort) {
         this.sorts = secondarySort(this.sorts, column);
       } else {
         this.sorts = primarySort(this.sorts, column);

diff --git a/src/components/utils/sort.js b/src/components/utils/sort.js
@@ -13,13 +13,27 @@ function getCurrentPrimarySort(sortArray, column) {
   : undefined;
 }
 
-function getNextSort(currentSort) {
-  if (currentSort === SORT_TYPES.Ascending) {
+function getNextSort(currentSort, column) {
+  if (SORT_TYPES.Descending === getColumnFirstSortType(column)
+    && currentSort === SORT_TYPES.Ascending) {
+    return SORT_TYPES.None
+  } else if (currentSort === SORT_TYPES.Ascending) {
     return SORT_TYPES.Descending;
+  }
+  if (SORT_TYPES.Descending === getColumnFirstSortType(column)
+    && currentSort === SORT_TYPES.Descending) {
+    return SORT_TYPES.Ascending;
   } else if (currentSort === SORT_TYPES.Descending) {
     return SORT_TYPES.None;
   }
-  return SORT_TYPES.Ascending;
+
+  if (SORT_TYPES.Descending === getColumnFirstSortType(column)
+    && currentSort === SORT_TYPES.None) {
+    return SORT_TYPES.Descending;
+  } else {
+    return SORT_TYPES.Ascending;
+  }
+
 }
 
 function getIndex(sortArray, column) {
@@ -31,7 +45,7 @@ function getIndex(sortArray, column) {
 
 const primarySort = (sortArray, column) => {
   const currentPrimarySort = getCurrentPrimarySort(sortArray, column);
-  const nextPrimarySort = getNextSort(currentPrimarySort);
+  const nextPrimarySort = getNextSort(currentPrimarySort, column);
   return [{
     field: column.field,
     type: currentPrimarySort ? nextPrimarySort : getColumnFirstSortType(column),
@@ -46,7 +60,7 @@ const secondarySort = (sortArray, column) => {
       type: getColumnFirstSortType(column),
     });
   } else {
-    sortArray[index].type = getNextSort(sortArray[index].type);
+    sortArray[index].type = getNextSort(sortArray[index].type, column);
   }
   return sortArray;
 };

diff --git a/vp-docs/guide/configuration/sort-options.md b/vp-docs/guide/configuration/sort-options.md
@@ -48,19 +48,23 @@ Allows specifying a default sort for the table on wakeup. Both **field** and **t
 </vue-good-table>
 ```
 
-## Multiple Column Sort
+## multipleColumns
+
+type: `Boolean (default: true)`
+
+Enable/disable multiple column sort. Users can shift-click on multiple columns to sort by multiple columns. The first column in the array gets primary sort.  
+
 ```html
 <vue-good-table
   :columns="columns"
   :rows="rows"
   :sort-options="{
     enabled: true,
+    multipleColumns: true,
     initialSortBy: [
       {field: 'name', type: 'asc'},
       {field: 'age', type: 'desc'}
     ],
   }">
 </vue-good-table>
-```
-
-Users can shift-click on multiple columns to sort by multiple columns. The first column in the array gets primary sort.
+```