toggle sortable

packages/table/src/table-header.js

@@ -112,9 +112,9 @@ export default {
                     }
                     {
                       column.sortable
-                        ? <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 class="caret-wrapper" on-click={ ($event) => this.handleHeaderClick($event, column) }>
+                            <i class="sort-caret ascending"></i>
+                            <i class="sort-caret descending"></i>
                           </span>
                         : ''
                     }
@@ -148,7 +148,9 @@ export default {
     layout: {
       required: true
     },
-    border: Boolean
+    border: Boolean,
+    defaultSortProp: String,
+    defaultSortOrder: String
   },
 
   components: {
@@ -182,6 +184,23 @@ export default {
     this.filterPanels = {};
   },
 
+  mounted() {
+    const states = this.store.states;
+    states.sortProp = this.defaultSortProp;
+    states.sortOrder = this.defaultSortOrder;
+
+    this.$nextTick(_ => {
+      for (let i = 0, length = this.columns.length; i < length; i++) {
+        if (this.columns[i].property === this.defaultSortProp) {
+          this.columns[i].order = this.defaultSortOrder;
+          break;
+        }
+      }
+
+      this.store.commit('changeSortCondition');
+    });
+  },
+
   beforeDestroy() {
     const panels = this.filterPanels;
     for (let prop in panels) {
@@ -334,7 +353,16 @@ export default {
       document.body.style.cursor = '';
     },
 
-    handleHeaderClick(event, column, order) {
+    toggleOrder(column) {
+      if (column.order === 'ascending') {
+        return 'descending';
+      }
+      return 'ascending';
+    },
+
+    handleHeaderClick(event, column) {
+      let order = this.toggleOrder(column);
+
       let target = event.target;
       while (target && target.tagName !== 'TH') {
         target = target.parentNode;

packages/table/src/table.vue

@@ -15,6 +15,8 @@
         :store="store"
         :layout="layout"
         :border="border"
+        :default-sort-prop="defaultSortProp"
+        :default-sort-order="defaultSortOrder"
         :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
       </table-header>
     </div>
@@ -166,7 +168,11 @@
 
       expandRowKeys: Array,
 
-      defaultExpandAll: Boolean
+      defaultExpandAll: Boolean,
+
+      defaultSortProp: String,
+
+      defaultSortOrder: String
     },
 
     components: {

test/unit/specs/table.spec.js

@@ -1105,9 +1105,9 @@ describe('Table', () => {
           });
 
         setTimeout(_ => {
-          const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
-
+          const elm = vm.$el.querySelector('.caret-wrapper');
           elm.click();
+
           setTimeout(_ => {
             const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
             expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);
@@ -1143,7 +1143,7 @@ describe('Table', () => {
       const vm = createTable('', '', '', 'sortable');
 
       it('ascending', done => {
-        const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
+        const elm = vm.$el.querySelector('.caret-wrapper');
 
         elm.click();
         setTimeout(_ => {
@@ -1155,7 +1155,7 @@ describe('Table', () => {
       });
 
       it('descending', done => {
-        const elm = vm.$el.querySelector('.caret-wrapper > .descending');
+        const elm = vm.$el.querySelector('.caret-wrapper');
 
         elm.click();
         setTimeout(_ => {