Added default sorting to data table (#465)

* added default-sort prop * switched sorting to start with asc
vuetifyjs · May 1, 2017 · a7ae1ec · a7ae1ec
1 parent a88dcf1
commit a7ae1ec
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/components/tables/DataTable.js b/src/components/tables/DataTable.js
@@ -84,6 +84,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    defaultSort: {
+      type: Object,
+      default: () => null
     }
   },
 
@@ -175,12 +179,12 @@ export default {
     sort (index) {
       if (this.sorting === null) {
         this.sorting = index
-        this.desc = true
-      } else if (this.sorting === index && this.desc) {
         this.desc = false
+      } else if (this.sorting === index && !this.desc) {
+        this.desc = true
       } else if (this.sorting !== index) {
         this.sorting = index
-        this.desc = true
+        this.desc = false
       } else {
         this.sorting = null
         this.desc = null
@@ -204,7 +208,10 @@ export default {
 
   mounted () {
     const header = this.headers.find(h => !('sortable' in h) || h.sortable)
-    this.sort(header.value)
+    this.desc = this.defaultSort ? this.defaultSort.desc : this.desc
+    this.sorting = this.defaultSort ? this.defaultSort.field : header.value
+
+    this.update()
   },
 
   render (h) {

diff --git a/src/components/tables/mixins/head.js b/src/components/tables/mixins/head.js
@@ -35,7 +35,7 @@ export default {
         !('value' in item) && console.warn('Data table headers must have a value property that corresponds to a value in the v-model array')
 
         classes.push('sortable')
-        const icon = this.$createElement('v-icon', 'arrow_downward')
+        const icon = this.$createElement('v-icon', 'arrow_upward')
         item.left && children.push(icon) || children.unshift(icon)
 
         beingSorted = this.sorting === item.value

diff --git a/src/stylus/components/_datatables.styl b/src/stylus/components/_datatables.styl
@@ -25,7 +25,7 @@
           color: rgba(#000, .87)
           opacity: 1
 
-        &.asc
+        &.desc
           i
             transform: rotate(-180deg)