fixing table grouping and collapsing functionality. fixes #692

dev/grouped-table.vue

@@ -14,11 +14,13 @@
     :search-options="{
       enabled: false,
     }"
+    :pagination-options="{
+      enabled: true,
+    }"
     :group-options="{
       enabled: true,
       headerPosition: 'top',
       collapsable: true,
-      maintainExpanded: true,
     }"
     styleClass="vgt-table condensed bordered"
     ref="groupedTable"
@@ -73,6 +75,8 @@ export default {
             { name: 'Cat', diet: 'carnivore', count: 28 },
             { name: 'Dog', diet: 'omnivore', count: 12 },
             { name: 'Dolphin', diet: 'carnivore', count: 9 },
+            { name: 'Shrew', diet: 'carnivore', count: 9 },
+            { name: 'Monkey', diet: 'carnivore', count: 9 },
           ],
         },
         {
@@ -84,6 +88,7 @@ export default {
             { name: 'lizard', diet: 'insectivore', count: 34 },
             { name: 'crocodile', diet: 'carnivore', count: 22 },
             { name: 'turtles', diet: 'herbivore', count: 29 },
+            { name: 'alligator', diet: 'herbivore', count: 29 },
           ],
         },
         {

src/components/Table.vue

@@ -150,7 +150,7 @@
             <!-- if group row header is at the top -->
             <vgt-header-row
               v-if="groupHeaderOnTop"
-              @vgtExpand="toggleExpand(index)"
+              @vgtExpand="toggleExpand(headerRow.vgt_header_id)"
               :header-row="headerRow"
               :columns="columns"
               :line-numbers="lineNumbers"
@@ -347,8 +347,6 @@ export default {
         return {
           enabled: false,
           collapsable: false,
-          maintainExpanded: false,
-          rowKey: null
         };
       },
     },
@@ -424,6 +422,7 @@ export default {
     clearSelectionText: 'clear',
 
     // keys for rows that are currently expanded
+    maintainExpanded: true,
     expandedRowKeys: new Set(),
 
     // internal sort options
@@ -816,8 +815,10 @@ export default {
 
       // for every group, extract the child rows
       // to cater to paging
+      //* flatten the rows for paging.
       let paginatedRows = [];
       each(this.processedRows, (childRows) => {
+        paginatedRows.push(childRows);
         paginatedRows.push(...childRows.children);
       });
 
@@ -844,12 +845,26 @@ export default {
       }
       // reconstruct paginated rows here
       const reconstructedRows = [];
-      each(this.processedRows, (headerRow) => {
-        const i = headerRow.vgt_header_id;
-        const children = filter(paginatedRows, ['vgt_id', i]);
-        const newHeaderRow = cloneDeep(headerRow);
-        newHeaderRow.children = children;
-        reconstructedRows.push(newHeaderRow);
+      paginatedRows.forEach((flatRow) => {
+        //* header row?
+        if (flatRow.vgt_header_id !== undefined) {
+          this.handleExpanded(flatRow);
+          const newHeaderRow = cloneDeep(flatRow);
+          newHeaderRow.children = [];
+          reconstructedRows.push(newHeaderRow);
+        } else {
+          //* child row
+          let hRow = reconstructedRows.find(r => r.vgt_header_id === flatRow.vgt_id);
+          if (!hRow) {
+            hRow = this.processedRows.find(r => r.vgt_header_id === flatRow.vgt_id);
+            if (hRow) {
+              hRow = cloneDeep(hRow);
+              hRow.children = [];
+              reconstructedRows.push(hRow);
+            }
+          }
+          hRow.children.push(flatRow);
+        }
       });
       return reconstructedRows;
     },
@@ -894,23 +909,34 @@ export default {
   },
 
   methods: {
+    //* we need to check for expanded row state here
+    //* to maintain it when sorting/filtering
+    handleExpanded(headerRow) {
+      if (this.maintainExpanded &&
+        this.expandedRowKeys.has(headerRow.vgt_header_id)) {
+        this.$set(headerRow, 'vgtIsExpanded', true);
+      } else {
+        this.$set(headerRow, 'vgtIsExpanded', false);
+      }
+    },
     toggleExpand(index) {
-      let headerRow = this.filteredRows[index];
+      const headerRow = this.filteredRows.find(r => r.vgt_header_id === index);
       if (headerRow) {
         this.$set(headerRow, 'vgtIsExpanded', !headerRow.vgtIsExpanded);
       }
-      if (this.groupOptions.maintainExpanded && headerRow.vgtIsExpanded) {
-        this.expandedRowKeys.add(headerRow[this.groupOptions.rowKey]);
+      if (this.maintainExpanded
+        && headerRow.vgtIsExpanded) {
+        this.expandedRowKeys.add(headerRow.vgt_header_id);
       } else {
-        this.expandedRowKeys.delete(headerRow[this.groupOptions.rowKey]);
+        this.expandedRowKeys.delete(headerRow.vgt_header_id);
       }
     },
 
     expandAll() {
       this.filteredRows.forEach((row) => {
         this.$set(row, 'vgtIsExpanded', true);
-        if (this.groupOptions.maintainExpanded) {
-          this.expandedRowKeys.add(row[this.groupOptions.rowKey]);
+        if (this.maintainExpanded) {
+          this.expandedRowKeys.add(row.vgt_header_id);
         }
       });
     },
@@ -1220,7 +1246,7 @@ export default {
         }
 
         // Otherwise Use default filters
-        const typeDef = column.typeDef;
+        const { typeDef } = column;
         for (let filter of columnFilters) {
           let filterLabel = filter;
           if (typeof filter === 'object') {
@@ -1338,12 +1364,6 @@ export default {
     handleGrouped(originalRows) {
       each(originalRows, (headerRow, i) => {
         headerRow.vgt_header_id = i;
-        if (
-          this.groupOptions.maintainExpanded &&
-          this.expandedRowKeys.has(headerRow[this.groupOptions.rowKey])
-        ) {
-          this.$set(headerRow, 'vgtIsExpanded', true);
-        }
         each(headerRow.children, (childRow) => {
           childRow.vgt_id = i;
         });
@@ -1528,13 +1548,6 @@ export default {
         this.clearSelectionText = clearSelectionText;
       }
     },
-
-    // initializeColumns() {
-    //   // take care of default sort on mount
-    //   if (this.defaultSortBy) {
-    //     this.handleDefaultSort();
-    //   }
-    // },
   },
 
   mounted() {

src/components/VgtHeaderRow.vue

@@ -64,7 +64,7 @@ export default {
     },
     collapsable: {
       type: [Boolean, Number],
-      default: false
+      default: false,
     },
     collectFormatted: {
       type: Function,
@@ -86,12 +86,12 @@ export default {
   computed: {
   },
   methods: {
-    columnCollapsable: function (currentIndex) {
+    columnCollapsable(currentIndex) {
       if (this.collapsable === true) {
         return currentIndex === 0;
       }
       return currentIndex === this.collapsable;
-    }
+    },
   },
   mounted() {
   },

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

@@ -174,24 +174,5 @@ this.$refs.myCustomTable.expandAll();
 this.$refs.myCustomTable.collapseAll();
 ```
 
-### Maintaining Expanded Rows
-
-If you make alterations to the data being passed into the rows on the table, such as adding or removing a row, all of your groupings will be collapsed by default. 
-Inside of `groupOptions`, add an attribute of `maintainExpanded: true` so that the expanded rows will stay expanded after 
-changes to the row data. Additionally you must provide the `rowKey` attribute as a string. The `rowKey` shoud be a field on the row
-that can be used for a unique identifier, such as 'id'.
-
-```vue
-<vue-good-table
-  :columns="columns"
-  :rows="rows"
-  :group-options="{
-    enabled: true,
-    collapsable: true,
-    maintainExpanded: true,
-    rowKey: 'id'
-  }"
-/>
-```
 * **Live Demo:** https://jsfiddle.net/nb6fcqs7
 

vp-docs/guide/configuration/README.md

@@ -16,7 +16,6 @@ Array containing objects that describe table columns. The column object itself c
     {
       label: 'Name',
       field: 'name',
-      filterable: true,
     }
     //...
 ]