Table: support table sort (#1918)

packages/table/src/table-header.js

@@ -112,9 +112,9 @@ export default {
                       }
                       {
                         column.sortable
-                          ? <span class="caret-wrapper" on-click={ ($event) => this.handleHeaderClick($event, column) }>
-                              <i class="sort-caret ascending"></i>
-                              <i class="sort-caret descending"></i>
+                          ? <span class="caret-wrapper">
+                              <i class="sort-caret ascending" on-click={ ($event) => this.handleHeaderClick($event, column, 'ascending')}></i>
+                              <i class="sort-caret descending" on-click={ ($event) => this.handleHeaderClick($event, column, 'descending')}></i>
                             </span>
                           : ''
                        }
@@ -332,7 +332,7 @@ export default {
       document.body.style.cursor = '';
     },
 
-    handleHeaderClick(event, column) {
+    handleHeaderClick(event, column, order) {
       let target = event.target;
       while (target && target.tagName !== 'TH') {
         target = target.parentNode;
@@ -360,15 +360,14 @@ export default {
         sortProp = column.property;
       }
 
-      if (!column.order) {
-        sortOrder = column.order = 'ascending';
-      } else if (column.order === 'ascending') {
-        sortOrder = column.order = 'descending';
-      } else {
+      if (column.order === order) {
         sortOrder = column.order = null;
         states.sortingColumn = null;
         sortProp = null;
+      } else {
+        sortOrder = column.order = order;
       }
+
       states.sortProp = sortProp;
       states.sortOrder = sortOrder;
 

test/unit/specs/table.spec.js

@@ -981,7 +981,7 @@ describe('Table', () => {
           });
 
         setTimeout(_ => {
-          const elm = vm.$el.querySelector('.caret-wrapper');
+          const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
 
           elm.click();
           setTimeout(_ => {
@@ -1003,7 +1003,7 @@ describe('Table', () => {
           }
         }, '@sort-change="sortChange"');
         setTimeout(_ => {
-          const elm = vm.$el.querySelector('.caret-wrapper');
+          const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
 
           elm.click();
           setTimeout(_ => {
@@ -1019,7 +1019,7 @@ describe('Table', () => {
       const vm = createTable('', '', '', 'sortable');
 
       it('ascending', done => {
-        const elm = vm.$el.querySelector('.caret-wrapper');
+        const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
 
         elm.click();
         setTimeout(_ => {
@@ -1031,7 +1031,7 @@ describe('Table', () => {
       });
 
       it('descending', done => {
-        const elm = vm.$el.querySelector('.caret-wrapper');
+        const elm = vm.$el.querySelector('.caret-wrapper > .descending');
 
         elm.click();
         setTimeout(_ => {