checkbox table in-built

Author: xaksis

.gitignore

@@ -1,12 +1,3 @@
 .DS_Store
 npm-debug.log
 node_modules/
-.idea/
-/demos/demo1/dist/
-/demos/demo1/package.json
-/demos/demo1/webpack.config.js
-/demos/demo2/dist/
-/demos/demo2/package.json
-/demos/demo2/webpack.config.js
-/test/unit/coverage/
-

README.md

@@ -37,6 +37,7 @@ Some example recipes for inspiration
     - [Sort Options](#sort-options)
     - [Pagination Options](#pagination-options)
     - [Search Options](#search-options)
+    - [Checkbox Table](#checkbox-table)
     - [Grouped Row Options](#grouped-row-options)
     - [Style/Theme](#styletheme)
   - [Column Options](#column-options)
@@ -474,18 +475,36 @@ data(){
 }
 ```
 
+#### Checkbox Table
+Creating table with selectable rows (checkboxes) is easier than ever. 
+![Checkbox Screenshot](README/images/vgt-table.checkbox.png)
+
+##### selectOptions `Object`
+Object containing select options
+```html
+<vue-good-table
+  @on-select-all="allSelected"
+  @on-row-click="rowSelected"
+  :columns="columns"
+  :rows="rows"
+  :select-options="{
+    enabled: true
+  }">
+ ```
+Check out [a working example](https://jsfiddle.net/aks9800/keLjcssn/) for details
+
+
 #### Grouped Row Options
 ---
 Sometimes you have a hierarchy in table and you want to group rows under subheadings, vue-good-table allows you to do that as well. Following properties relate to row grouping
 
 ##### groupOptions `Object`
 Object containing group related options. 
 ```html
-<input type="text" v-model="searchTerm" >
 <vue-good-table
   :columns="columns"
   :rows="rows"
-  :groupOptions="{
+  :group-options="{
     enabled: true,
     headerPosition: 'bottom' 
   }">

README/images/vgt-table.checkbox.png

@@ -1,13 +1,5 @@
 <template>
   <div>
-    <p>
-      Scenario 1: If you click on "Auto filter name" and then
-      Reset, it works. Then, uncoment the line 15, retry, it doesnt work. 
-    </p>
-    <p>
-    Scenario 2: Resetting by "=null" (uncomment line 16),
-    autofilter Name + Reset => it works. However, Autofilter Age + Reset does not work
-    </p><br>
   <a href="#" @click.stop="autofilter('name')">Auto filter Name</a>&nbsp;&nbsp;
   <a href="#" @click.stop="autofilter('age')">Auto filter age</a>
   &nbsp;&nbsp;
@@ -16,12 +8,18 @@
     <vue-good-table
       :columns="columns"
       :rows="rows"
+      mode=""
+      @on-select-all="onSelectAll"
+      @on-row-click="selectRow"
+      :select-options="{
+        enabled: true,
+      }"
       :search-options="{
         enabled: false,
       }"
       :pagination-options="{
         enabled: true,
-        perPage: 2,
+        perPage: 3,
         setCurrentPage: 1,
       }">
     </vue-good-table>
@@ -90,6 +88,31 @@ export default {
     };
   },
   methods: {
+    onSelectAll(params) {
+      console.log(params);
+      // this.unselectAll();
+      // if (params.selected) {
+      //   for (let i = 0; i < params.selectedRows.length; i++) {
+      //     // lets get the original index of the row
+      //     const originalIndex = params.selectedRows[i].originalIndex;
+      //     // now lets set that row's selected value to be true
+      //     this.$set(this.rows[originalIndex], 'selected', true);
+      //   }
+      // }
+    },
+    unselectAll() {
+      for (let i = 0; i < this.rows.length; i++) {
+        this.$set(this.rows[i], 'selected', false);
+      }
+    },
+    selectRow(params) {
+      console.log(params.row, params.pageIndex, params.selected);
+      // if (this.rows[row.originalIndex].selected) {
+      //   this.$set(this.rows[row.originalIndex], 'selected', false);
+      // } else {
+      //   this.$set(this.rows[row.originalIndex], 'selected', true);
+      // }
+    },
     autofilter(type) {
       if (type == 'name') {
         this.columns[0].filterOptions.filterValue = 'John';

dev/App.vue

@@ -3,6 +3,9 @@
   <vue-good-table
     :columns="columns"
     :rows="rows"
+    :line-numbers="true"
+    :select-options="{enabled: true}"
+    @on-select-all="onSelectAll"
     :group-options="{
       enabled: true,
       headerPosition: 'bottom',
@@ -77,6 +80,9 @@ export default {
   computed: {
   },
   methods: {
+    onSelectAll(params) {
+      console.log(params);
+    },
     sumCount(rowObj) {
       let sum = 0;
       for (let i = 0; i < rowObj.children.length; i++) {

dev/grouped-table.vue

@@ -43,10 +43,10 @@
     "lodash.clone": "^4.5.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.filter": "^4.6.0",
-    "lodash.foreach": "^4.5.0",
-    "poi": "^9.6.13"
+    "lodash.foreach": "^4.5.0"
   },
   "devDependencies": {
+    "poi": "^9.6.13",
     "bili": "^2.2.7",
     "rollup-plugin-vue": "^3.0.0",
     "sass-loader": "^6.0.6",