Option to Keep Rows Expanded in Grouped Tables (xaksis#704)

* add row style class to header row * add logic to maintain expanded rows * add documentation
p0psicles · Jun 24, 2020 · 3c9c8fe · 3c9c8fe
1 parent 43f22f0
commit 3c9c8fe
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -159,6 +159,7 @@
               :collapsable="groupOptions.collapsable"
               :collect-formatted="collectFormatted"
               :formatted-row="formattedRow"
+              :class="getRowStyleClass(headerRow)"
               :get-classes="getClasses"
               :full-colspan="fullColspan"
               :groupIndex="index"
@@ -353,6 +354,9 @@ export default {
       default() {
         return {
           enabled: false,
+          collapsable: false,
+          maintainExpanded: false,
+          rowKey: null
         };
       },
     },
@@ -428,6 +432,9 @@ export default {
     selectionText: 'rows selected',
     clearSelectionText: 'clear',
 
+    // keys for rows that are currently expanded
+    expandedRowKeys: new Set(),
+
     // internal sort options
     sortable: true,
     defaultSortBy: null,
@@ -903,17 +910,26 @@ export default {
       if (headerRow) {
         this.$set(headerRow, 'vgtIsExpanded', !headerRow.vgtIsExpanded);
       }
+      if (this.groupOptions.maintainExpanded && headerRow.vgtIsExpanded) {
+        this.expandedRowKeys.add(headerRow[this.groupOptions.rowKey]);
+      } else {
+        this.expandedRowKeys.delete(headerRow[this.groupOptions.rowKey]);
+      }
     },
 
     expandAll() {
       this.filteredRows.forEach((row) => {
         this.$set(row, 'vgtIsExpanded', true);
+        if (this.groupOptions.maintainExpanded) {
+          this.expandedRowKeys.add(row[this.groupOptions.rowKey]);
+        }
       });
     },
 
     collapseAll() {
       this.filteredRows.forEach((row) => {
         this.$set(row, 'vgtIsExpanded', false);
+        this.expandedRowKeys.clear();
       });
     },
 
@@ -1339,6 +1355,12 @@ 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;
         });

diff --git a/vp-docs/guide/advanced/grouped-table.md b/vp-docs/guide/advanced/grouped-table.md
@@ -174,5 +174,24 @@ 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"
+  :groupOptions="{
+    enabled: true,
+    collapsable: true,
+    maintainExpanded: true,
+    rowKey: 'id'
+  }"
+/>
+```
 * **Live Demo:** https://jsfiddle.net/nb6fcqs7