add watchable sort parameters in md-table (vuematerial#505)

Author: albanm

docs/src/pages/components/Table.vue

@@ -337,7 +337,7 @@
                 </md-button>
               </md-toolbar>
 
-              <md-table md-sort="dessert" md-sort-type="desc" @select="onSelect" @sort="onSort">
+              <md-table :md-sort="sortInput.name" :md-sort-type="sortInput.type" @select="onSelect" @sort="onSort">
                 <md-table-header>
                   <md-table-row>
                     <md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
@@ -374,6 +374,27 @@
               <pre>{{ selectedData }}</pre>
             </div>
 
+            <div class="output">
+              <h2 class="md-title">Sort input</h2>
+              <md-input-container>
+                <label for="sort-input-name">Name</label>
+                <md-select name="sort-input-name" id="sort-input-name" v-model="sortInput.name">
+                  <md-option value="">None</md-option>
+                  <md-option value="dessert">Dessert</md-option>
+                  <md-option value="calories">Calories</md-option>
+                  <md-option value="fat">Fat</md-option>
+                </md-select>
+              </md-input-container>
+
+              <md-input-container>
+                <label for="sort-input-type">Type</label>
+                <md-select name="sort-input-type" id="sort-input-type" v-model="sortInput.type">
+                  <md-option value="asc">Ascending</md-option>
+                  <md-option value="desc">Descending</md-option>
+                </md-select>
+              </md-input-container>
+            </div>
+
             <div class="output">
               <h2 class="md-title">Current Sort</h2>
               <pre>{{ sort }}</pre>
@@ -716,6 +737,10 @@
         }
       ],
       selectedData: [],
+      sortInput: {
+        name: 'dessert',
+        type: 'asc'
+      },
       sort: {},
       page: {}
     }),

src/components/mdTable/mdTable.vue

@@ -48,6 +48,14 @@
       },
       selectedRows() {
         this.numberOfSelected = Object.keys(this.selectedRows).length;
+      },
+      mdSort() {
+        this.sortBy = this.mdSort;
+        this.$emit('sortInput');
+      },
+      mdSortType() {
+        this.sortType = this.mdSortType;
+        this.$emit('sortInput');
       }
     },
     mounted() {

src/components/mdTable/mdTableHead.vue

@@ -64,15 +64,20 @@
           this.parentTable.sortType = this.sortType;
           this.parentTable.emitSort(this.mdSortBy);
         }
+      },
+      initSort() {
+        if (this.hasMatchSort()) {
+          this.sorted = true;
+          this.sortType = this.parentTable.sortType;
+        }
       }
     },
     mounted() {
       this.parentTable = getClosestVueParent(this.$parent, 'md-table');
-
-      if (this.hasMatchSort()) {
-        this.sorted = true;
-        this.sortType = this.parentTable.sortType;
-      }
+      this.initSort();
+      this.parentTable.$on('sortInput', () => {
+        this.initSort();
+      });
     }
   };
 </script>