Add feature to enable checking all checkboxes of a grouped table (#703)

* Add feature to enable checking all checkboxes of a grouped table's children. The checkbox is available in span/non-span mode in the vgt-header-row. * Option to Keep Rows Expanded in Grouped Tables (#704) * add row style class to header row * add logic to maintain expanded rows * add documentation * Check for the selectAllByGoup using the same 'typeof' as the others * Move @click for vgtExpand to span's with the triangle and the header label. * This, because if it's on the TR, it will also expand when the checkbox is clicked. * Update docs * Remove groupOptions. Maybe used it at some point, But not anymore. * Remove doc (rebase thing?) * Newline Co-authored-by: Rob Gaston <[email protected]>
xaksis · Jul 22, 2020 · 8aff895 · 8aff895
1 parent 329ed72
commit 8aff895
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 13 deletions.
diff --git a/dev/grouped-table.vue b/dev/grouped-table.vue
@@ -6,7 +6,10 @@
     :columns="columns"
     :rows="rows"
     :line-numbers="true"
-    :select-options="{enabled: true}"
+    :select-options="{
+      enabled: true,
+      selectAllByGroup: true
+    }"
     @on-select-all="onSelectAll"
     @on-search="onSelectAll"
     @on-row-mouseenter="onMouseover"

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -155,12 +155,15 @@
               :columns="columns"
               :line-numbers="lineNumbers"
               :selectable="selectable"
+              :select-all-by-group="selectAllByGroup"
               :collapsable="groupOptions.collapsable"
               :collect-formatted="collectFormatted"
               :formatted-row="formattedRow"
               :class="getRowStyleClass(headerRow)"
               :get-classes="getClasses"
               :full-colspan="fullColspan"
+              :groupIndex="index"
+              @on-select-group-change="toggleSelectGroup($event, headerRow)"
             >
               <template
                 v-if="hasHeaderRowTemplate"
@@ -236,10 +239,13 @@
               :columns="columns"
               :line-numbers="lineNumbers"
               :selectable="selectable"
+              :select-all-by-group="selectAllByGroup"
               :collect-formatted="collectFormatted"
               :formatted-row="formattedRow"
               :get-classes="getClasses"
               :full-colspan="fullColspan"
+              :groupIndex="index"
+              @on-select-group-change="toggleSelectGroup($event, headerRow)"
             >
               <template
                 v-if="hasHeaderRowTemplate"
@@ -362,6 +368,7 @@ export default {
           selectionText: 'rows selected',
           clearSelectionText: 'clear',
           disableSelectInfo: false,
+          selectAllByGroup: false,
         };
       },
     },
@@ -1019,6 +1026,12 @@ export default {
       this.emitSelectedRows();
     },
 
+    toggleSelectGroup(event, headerRow) {
+      each(headerRow.children, (row) => {
+        this.$set(row, 'vgtSelected', event.checked);
+      });
+    },
+
     changePage(value) {
       if (this.paginationOptions.enabled) {
         let paginationWidget = this.$refs.paginationBottom;
@@ -1382,6 +1395,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;
         });
@@ -1536,6 +1555,7 @@ export default {
         selectOnCheckboxOnly,
         selectAllByPage,
         disableSelectInfo,
+        selectAllByGroup,
       } = this.selectOptions;
 
       if (typeof enabled === 'boolean') {
@@ -1550,6 +1570,10 @@ export default {
         this.selectAllByPage = selectAllByPage;
       }
 
+      if (typeof selectAllByGroup === 'boolean') {
+        this.selectAllByGroup = selectAllByGroup;
+      }
+
       if (typeof disableSelectInfo === 'boolean') {
         this.disableSelectInfo = disableSelectInfo;
       }

diff --git a/src/components/VgtHeaderRow.vue b/src/components/VgtHeaderRow.vue
@@ -4,25 +4,51 @@
     v-if="headerRow.mode === 'span'"
     class="vgt-left-align vgt-row-header"
     :colspan="fullColspan"
-    @click="collapsable ? $emit('vgtExpand', !headerRow.vgtIsExpanded) : () => {}">
-    <span v-if="collapsable" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span>
-    <slot
-      :row="headerRow"
-      name="table-header-row">
-      <span v-if="headerRow.html" v-html="headerRow.label">
-      </span>
-      <span v-else>
-        {{ headerRow.label }}
-      </span>
-    </slot>
+    >
+    <template v-if="selectAllByGroup">
+      <slot name="table-header-group-select"
+        :columns="columns"
+        :row="headerRow"
+      >
+        <input
+          type="checkbox"
+          :checked="allSelected"
+          @change="toggleSelectGroup($event)" />
+      </slot>
+    </template>
+    <span @click="collapsable ? $emit('vgtExpand', !headerRow.vgtIsExpanded) : () => {}">
+      <span v-if="collapsable" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span>
+        <slot
+        :row="headerRow"
+        name="table-header-row">
+        <span v-if="headerRow.html" v-html="headerRow.label">
+        </span>
+        <span v-else>
+          {{ headerRow.label }}
+        </span>
+      </slot>
+    </span>
   </th>
   <!-- if the mode is not span, we display every column -->
   <th
     class="vgt-row-header"
     v-if="headerRow.mode !== 'span' && lineNumbers"></th>
   <th
     class="vgt-row-header"
-    v-if="headerRow.mode !== 'span' && selectable"></th>
+    v-if="headerRow.mode !== 'span' && selectable">
+    <template v-if="selectAllByGroup"
+    >
+      <slot name="table-header-group-select"
+        :columns="columns"
+        :row="headerRow"
+      >
+        <input
+          type="checkbox"
+          :checked="allSelected"
+          @change="toggleSelectGroup($event)" />
+      </slot>
+    </template>
+  </th>
   <th
     v-if="headerRow.mode !== 'span' && !column.hidden"
     v-for="(column, i) in columns"
@@ -62,6 +88,9 @@ export default {
     selectable: {
       type: Boolean,
     },
+    selectAllByGroup: {
+      type: Boolean
+    },
     collapsable: {
       type: [Boolean, Number],
       default: false,
@@ -78,12 +107,19 @@ export default {
     fullColspan: {
       type: Number,
     },
+    groupIndex: {
+      type: Number
+    },
   },
   data() {
     return {
     };
   },
   computed: {
+    allSelected() {
+      const { headerRow, groupChildObject } = this;
+      return headerRow.children.filter((row) => row.vgtSelected).length === headerRow.children.length;
+    }
   },
   methods: {
     columnCollapsable(currentIndex) {
@@ -92,7 +128,13 @@ export default {
       }
       return currentIndex === this.collapsable;
     },
+    toggleSelectGroup(event) {
+      this.$emit('on-select-group-change', {
+        groupIndex: this.groupIndex, checked: event.target.checked
+      });
+    }
   },
+  
   mounted() {
   },
   components: {

diff --git a/vp-docs/guide/advanced/checkbox-table.md b/vp-docs/guide/advanced/checkbox-table.md
@@ -20,6 +20,7 @@ Object containing select options
     selectionText: 'rows selected',
     clearSelectionText: 'clear',
     disableSelectInfo: true, // disable the select info panel on top
+    selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
   }">
 ```