Merge branch 'master' of https://github.com/xaksis/vue-good-table

README.md

@@ -8,8 +8,6 @@
 
 An easy to use, clean and powerful data table for VueJS with essential features like sorting, column filtering, pagination and much more - [xaksis.github.io/vue-good-table/](https://xaksis.github.io/vue-good-table/)
 
-Did vue-good-table just save you a bunch of time? Use some of them extra minutes to spread the joy!
-
 <!-- 
 ### Basic Table
 ![Basic Screenshot](README/images/vgt-table.regular.png) -->

dev/App.vue

@@ -77,6 +77,7 @@ export default {
           label: 'Age',
           field: 'age',
           type: 'number',
+          firstSortType: 'desc',
           filterOptions: {
             enabled: true,
             filterDropdownItems: [

src/components/Table.vue

@@ -150,7 +150,7 @@
             <!-- if group row header is at the top -->
             <vgt-header-row
               v-if="groupHeaderOnTop"
-              @vgtExpand="toggleExpand(headerRow.vgt_header_id)"
+              @vgtExpand="toggleExpand(headerRow[rowKeyField])"
               :header-row="headerRow"
               :columns="columns"
               :line-numbers="lineNumbers"
@@ -347,6 +347,7 @@ export default {
         return {
           enabled: false,
           collapsable: false,
+          rowKey: null
         };
       },
     },
@@ -530,6 +531,10 @@ export default {
       };
     },
 
+    rowKeyField() {
+      return this.groupOptions.rowKey || 'vgt_header_id';
+    },
+
     hasHeaderRowTemplate() {
       return (
         !!this.$slots['table-header-row'] ||
@@ -914,30 +919,30 @@ export default {
     //* to maintain it when sorting/filtering
     handleExpanded(headerRow) {
       if (this.maintainExpanded &&
-        this.expandedRowKeys.has(headerRow.vgt_header_id)) {
+        this.expandedRowKeys.has(headerRow[this.rowKeyField])) {
         this.$set(headerRow, 'vgtIsExpanded', true);
       } else {
         this.$set(headerRow, 'vgtIsExpanded', false);
       }
     },
-    toggleExpand(index) {
-      const headerRow = this.filteredRows.find(r => r.vgt_header_id === index);
+    toggleExpand(id) {
+      const headerRow = this.filteredRows.find(r => r[this.rowKeyField] === id);
       if (headerRow) {
         this.$set(headerRow, 'vgtIsExpanded', !headerRow.vgtIsExpanded);
       }
       if (this.maintainExpanded
         && headerRow.vgtIsExpanded) {
-        this.expandedRowKeys.add(headerRow.vgt_header_id);
+        this.expandedRowKeys.add(headerRow[this.rowKeyField]);
       } else {
-        this.expandedRowKeys.delete(headerRow.vgt_header_id);
+        this.expandedRowKeys.delete(headerRow[this.rowKeyField]);
       }
     },
 
     expandAll() {
       this.filteredRows.forEach((row) => {
         this.$set(row, 'vgtIsExpanded', true);
         if (this.maintainExpanded) {
-          this.expandedRowKeys.add(row.vgt_header_id);
+          this.expandedRowKeys.add(row[this.rowKeyField]);
         }
       });
     },

src/components/utils/sort.js

@@ -1,8 +1,19 @@
+const DEFAULT_SORT_TYPE = 'asc';
+
+function getColumnFirstSortType(column) {
+  return column.firstSortType || DEFAULT_SORT_TYPE;
+}
+
+function getCurrentPrimarySort(sortArray, column) {
+  return ( sortArray.length === 1 && sortArray[0].field === column.field )
+  ? sortArray[0].type
+  : undefined;
+}
 
 function getNextSort(currentSort) {
-  if (currentSort === 'asc') return 'desc';
-  // if (currentSort === 'desc') return null;
-  return 'asc';
+  return (currentSort === 'asc')
+    ? 'desc'
+    : DEFAULT_SORT_TYPE;
 }
 
 function getIndex(sortArray, column) {
@@ -13,40 +24,22 @@ function getIndex(sortArray, column) {
 }
 
 exports.primarySort = (sortArray, column) => {
-  if (sortArray.length
-    && sortArray.length === 1
-    && sortArray[0].field === column.field) {
-    const type = getNextSort(sortArray[0].type);
-    if (type) {
-      sortArray[0].type = getNextSort(sortArray[0].type);
-    } else {
-      sortArray = [];
-    }
-  } else {
-    sortArray = [{
-      field: column.field,
-      type: 'asc',
-    }];
-  }
-  return sortArray;
+  const currentPrimarySort = getCurrentPrimarySort(sortArray, column);
+  return [{
+    field: column.field,
+    type: currentPrimarySort ? getNextSort(currentPrimarySort) : getColumnFirstSortType(column),
+  }];
 };
 
 exports.secondarySort = (sortArray, column) => {
-  //* this means that primary sort exists, we're
-  //* just adding a secondary sort
   const index = getIndex(sortArray, column);
   if (index === -1) {
     sortArray.push({
       field: column.field,
-      type: 'asc',
+      type: getColumnFirstSortType(column),
     });
   } else {
-    const type = getNextSort(sortArray[index].type);
-    if (type) {
-      sortArray[index].type = type;
-    } else {
-      sortArray.splice(index, 1);
-    }
+    sortArray[index].type = getNextSort(sortArray[index].type);
   }
   return sortArray;
 };

src/styles/style.scss

@@ -1,3 +1,5 @@
+@import './striped';
+
 // base table styles
 @import './variables';
 @import './utils';
@@ -9,7 +11,6 @@
 
 // table enhancements
 @import './bordered';
-@import './striped';
 @import './rtl';
 @import './condensed';
 

vp-docs/guide/advanced/grouped-table.md

@@ -156,13 +156,17 @@ In this case header row expects a value for each column
 
 To allow the row to collapse and expand you can use the groupOption "collapsable". You can either pass in a boolean or a number.
 If `collapsable` is set to `true` then it will default to making the first column collapsable. Alternatively, you can specify the column index number.
+If you only add new rows to your table at the end, then the expanded or collapsed state of your rows will be maintained. 
+However if you need to insert rows before the last one, you can pass in `rowKey` inside of `groupOptions` with a unique identifier for your rows. 
+The expanded and collapsed state will then be maintained. 
 ```html
 <vue-good-table
   ref="myCustomTable"
   :columns="columns"
   :rows="rows"
   :group-options="{
     enabled: true,
+    rowKey="id"
     collapsable: true // or column index
   }"
 >

vp-docs/guide/configuration/column-options.md

@@ -96,6 +96,27 @@ columns: [
 ]
 ```
 
+## firstSortType
+
+type `String (default: 'asc')`
+
+controls the first sort type when sorting by the column. If you want the first sort type for this column to be descending, set this property to 'desc'. Possible values:
+* _asc_ - the initial sort will be ascending
+* _desc_ - the initial sort will be descending 
+
+
+```javascript
+columns: [
+  { 
+    label: 'name',
+    field: 'user_name',
+    sortable: true,
+    firstSortType: 'desc'
+  },
+  // ...
+]
+```
+
 ## sortFn
 
 type `Function`