diff --git a/src/components/Table.vue b/src/components/Table.vue index be89e8f1..4fd5ff60 100644 --- 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 index 35e081c4..d11bd927 100644 --- 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 + +``` * **Live Demo:** https://jsfiddle.net/nb6fcqs7