feat(QTable): new prop (column-sort-order) and new "columns" definition prop (sortOrder) quasarframework#8527

Author: rstoenescu

docs/src/pages/vue-components/table.md

@@ -62,6 +62,10 @@ columns: [ // array of Objects
     //   * is 0 then leave a and b unchanged with respect to each other, but sorted with respect to all different elements
     //   * is greater than 0 then sort b to an index lower than a, i.e. b comes first
 
+    // (optional; requires Quasar v1.15.11+) override 'column-sort-order' prop;
+    // sets column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending)
+    sortOrder: 'ad', // or 'da'
+
     // (optional) you can format the data with a function
     format: (val, row) => `${val}%`,
     // one more format example:

ui/dev/src/pages/components/data-table-part4.vue

@@ -20,6 +20,7 @@
       :hide-no-data="hideNoData"
       :hide-pagination="hidePagination"
       no-hover
+      column-sort-order="da"
     >
       <template v-slot:body="props">
         <q-tr :props="props">
@@ -181,7 +182,7 @@ export default {
           sortable: true
         },
         { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
-        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true, style: 'width: 10px' },
+        { name: 'fat', sortOrder: 'ad', label: 'Fat (g)', field: 'fat', sortable: true, style: 'width: 10px' },
         { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
         { name: 'protein', label: 'Protein (g)', field: 'protein' },
         { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },

ui/src/components/table/QTable.json

@@ -208,6 +208,13 @@
             "examples": [ "-1", "0", "1" ]
           }
         },
+        "sortOrder": {
+          "type": "String",
+          "desc": "Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); Overrides the 'column-sort-order' prop",
+          "values": [ "ad", "da" ],
+          "default": "ad",
+          "addedIn": "v1.15.11"
+        },
         "format": {
           "type": "Function",
           "desc": "Function you can apply to format your data",
@@ -348,6 +355,15 @@
       "category": "sorting"
     },
 
+    "column-sort-order": {
+      "type": "String",
+      "desc": "Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); It gets applied to all columns unless a column has its own sortOrder specified in the 'columns' definition prop",
+      "values": [ "ad", "da" ],
+      "default": "ad",
+      "category": "sorting",
+      "addedIn": "v1.15.11"
+    },
+
     "no-data-label": {
       "type": "String",
       "desc": "Override default text to display when no data is available",

ui/src/components/table/table-sort.js

@@ -48,6 +48,12 @@ export default {
             : (A === B ? 0 : dir)
         })
       }
+    },
+
+    columnSortOrder: {
+      type: String,
+      validator: v => v === 'ad' || v === 'da',
+      default: 'ad'
     }
   },
 
@@ -63,24 +69,43 @@ export default {
 
   methods: {
     sort (col /* String(col name) or Object(col definition) */) {
+      let sortOrder = this.columnSortOrder
+
       if (col === Object(col)) {
+        if (col.sortOrder) {
+          sortOrder = col.sortOrder
+        }
+
         col = col.name
       }
+      else if (this.columns[col].sortOrder) {
+        sortOrder = this.columns[col].sortOrder
+      }
 
       let { sortBy, descending } = this.computedPagination
 
       if (sortBy !== col) {
         sortBy = col
-        descending = false
+        descending = sortOrder === 'da'
       }
       else if (this.binaryStateSort === true) {
         descending = !descending
       }
       else if (descending === true) {
-        sortBy = null
+        if (sortOrder === 'ad') {
+          sortBy = null
+        }
+        else {
+          descending = false
+        }
       }
-      else {
-        descending = true
+      else { // ascending
+        if (sortOrder === 'ad') {
+          descending = true
+        }
+        else {
+          sortBy = null
+        }
       }
 
       this.setPagination({ sortBy, descending, page: 1 })