implement no-sorting prop

Author: Kenneth Cheng

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",

package.json

@@ -37,6 +37,7 @@ export default {
     summary: {type: String, default: null},
     sort: {type: Function, default: null},
     sorting: {type: Function, default: null},
+    noSorting: {type: Boolean, default: null},
     masking: {type: String, default: '•'},
     placeholder: {type: String, default: ''},
     color: {type: [String, Function], default: null},
@@ -254,6 +255,7 @@ export default {
         isLink: this.isLink || (this.link ? () => true : null),
         sort: this.sort,
         sorting: this.sorting,
+        noSorting: this.noSorting !== null ? this.noSorting : self.$parent.noSorting,
 
         keyField: this.keyField,
         sticky: this.sticky,

src/VueExcelColumn.vue

@@ -36,10 +36,6 @@
                 <span style="width:100%">
                   <svg v-if="selectedCount>0" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-times-circle fa-w-16 fa-sm"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
                   <svg v-else aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bars fa-w-14 fa-sm"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
-                  <!--
-                  <svg v-if="processing" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-spinner fa-w-16 fa-spin fa-sm"><path fill="currentColor" d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"></path></svg>
-                  <svg v-else aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bars fa-w-14 fa-sm"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
-                  -->
                 </span>
               </th>
               <th v-for="(item, p) in fields"
@@ -48,7 +44,8 @@
                   :colspan="p === fields.length - 1 && vScroller.buttonHeight < vScroller.height ? 2: 1"
                   :class="{'sort-asc-sign': sortPos==p && sortDir==1,
                           'sort-des-sign': sortPos==p && sortDir==-1,
-                          'sticky-column': item.sticky}"
+                          'sticky-column': item.sticky,
+                          'no-sorting': item.noSorting}"
                   :style="{left: item.left}"
                   @mousedown="headerClick($event, p)"
                   @contextmenu.prevent="panelFilterClick(item)">
@@ -331,6 +328,7 @@ export default defineComponent({
     },
     noFinding: {type: Boolean, default: false},
     noFindingNext: {type: Boolean, default: false},
+    noSorting: {type: Boolean, default: false},
     filterRow: {type: Boolean, default: false},
     freeSelect: {type: Boolean, default: false},
     noFooter: {type: Boolean, default: false},
@@ -1718,9 +1716,12 @@ export default defineComponent({
       this.fields[index - 1].label = e.target.textContent
     },
     sort (n, pos) {
-      this.processing = true
       const colPos = typeof pos === 'undefined' ? this.columnFilterRef.colPos : pos
       const field = this.fields[colPos]
+      if (field.noSorting) return
+
+      this.processing = true
+
       const name = field.name
       setTimeout(() => {
         let sorting = field.sorting
@@ -3074,6 +3075,9 @@ input:focus, input:active:focus, input.active:focus {
   cursor: s-resize;
   z-index: 6;
 }
+.systable thead th.no-sorting {
+  cursor: auto;
+}
 .systable thead td.column-filter {
   text-align: left;
   background-color: #fffff2;