call sortChange on th click

Author: timefordroids

packages/style/ve-table.less

@@ -222,7 +222,6 @@
                             height: 16px;
                             margin-left: 5px;
                             color: @ve-table-sort-icon-default-color;
-                            cursor: pointer;
                             .ve-table-sort-icon {
                                 position: absolute;
                                 display: block;
@@ -254,6 +253,10 @@
                                 left: 5px;
                             }
                         }
+
+                        .ve-table-sortable-column {
+                            cursor: pointer;
+                        }
                     }
                 }
             }

packages/ve-table/src/header/header-th.jsx

@@ -137,6 +137,19 @@ export default {
                 }
             }
 
+            return result;
+        },
+        // is sortable column
+        isSortableCloumn() {
+            let result = false;
+
+            const { sortColumns, groupColumnItem } = this;
+            const currentField = groupColumnItem.field;
+
+            if (Object.keys(sortColumns).includes(currentField)) {
+                result = true;
+            }
+
             return result;
         },
     },
@@ -155,6 +168,7 @@ export default {
                 [clsName("first-right-fixed-column")]:
                     this.isfirstRightFixedColumn,
                 [clsName("last-column")]: this.isLastCloumn,
+                [clsName("sortable-column")]: this.isSortableCloumn,
             };
 
             const { cellStyleOption, groupColumnItem, rowIndex } = this;
@@ -301,9 +315,6 @@ export default {
 
                 const props = {
                     class: clsName("sort"),
-                    on: {
-                        click: () => this.sortChange(),
-                    },
                 };
 
                 result = (
@@ -428,6 +439,10 @@ export default {
         const events = {
             click: (e) => {
                 this.cellClick(e, click);
+
+                if (this.isSortableCloumn) {
+                    this.sortChange();
+                }
             },
             dblclick: (e) => {
                 this.cellDblclick(e, dblclick);

tests/unit/specs/__snapshots__/ve-table-header-paging.spec.js.snap

@@ -14,8 +14,8 @@ exports[`veTable header paging render multiple field paging 1`] = `
       <thead class="ve-table-fixed-header ve-table-header">
         <tr class="ve-table-header-tr">
           <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Name</th>
-          <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
-          <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
+          <th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
+          <th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
           <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Hobby</th>
           <th rowspan="1" colspan="1" class="ve-table-header-th ve-table-last-column" style="text-align: left; top: 0px;">Address</th>
         </tr>
@@ -84,8 +84,8 @@ exports[`veTable header paging render single field paging 1`] = `
       <thead class="ve-table-fixed-header ve-table-header">
         <tr class="ve-table-header-tr">
           <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Name</th>
-          <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
-          <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
+          <th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Age<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
+          <th rowspan="1" colspan="1" class="ve-table-header-th ve-table-sortable-column" style="text-align: center; top: 0px;">Weight(kg)<span class="ve-table-sort"><i class="ve-icon iconfont-vet icon-vet-sort-top-arrow ve-table-sort-icon ve-table-sort-icon-top active"></i><i class="ve-icon iconfont-vet icon-vet-sort-bottom-arrow ve-table-sort-icon ve-table-sort-icon-bottom"></i></span></th>
           <th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Hobby</th>
           <th rowspan="1" colspan="1" class="ve-table-header-th ve-table-last-column" style="text-align: left; top: 0px;">Address</th>
         </tr>