row clicks selects/unselects checkbox

Author: rubanraj54

src/App.vue

@@ -49,7 +49,8 @@
                     per_page: 10,
                     checkbox_rows: true,
                     highlight_row_hover:true,
-                    highlight_row_hover_color:"grey",
+                    rows_selectable:true,
+                    // highlight_row_hover_color:"grey",
                 }
             }
         },

src/components/Row.vue

@@ -1,6 +1,6 @@
 <template>
-    <tr ref="vbt_row" v-bind:style='{"background": (row_higlighted) ? rowHighlightColor : ""}'>
-        <td v-show="checkboxRows" class="text-center" @click="selectCheckbox">
+    <tr ref="vbt_row" v-bind:style='{"background": (row_higlighted) ? rowHighlightColor : ""}' v-on="rowsSelectable ? { click: () => selectCheckbox() } : {}" >
+        <td v-show="checkboxRows" class="text-center" v-on="!rowsSelectable ? { click: () => selectCheckbox() } : {}">
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" value="" v-model="row_selected" @change="handleChange($event)">
             </div>
@@ -53,6 +53,10 @@
             highlightRowHoverColor: {
                 type: String,
                 default: "#d6d6d6"
+            },
+            rowsSelectable: {
+                type: Boolean,
+                default: false
             }
         },
         data: function() {
@@ -67,10 +71,6 @@
             this.checkInSelecteditems();
         },
         methods: {
-            test() {
-                console.log(333);
-
-            },
             handleChange(event) {
                 if (event.target.checked) {
                     this.$emit('add-selected-item', this.row);

src/components/VueBootstrap4Table.vue

@@ -14,7 +14,7 @@
                                     <Simple v-if="hasFilter(column)" :column="column" @update-filter="updateFilter" @clear-filter="clearFilter"></Simple>
                                 </td>
                             </tr>
-                            <Row v-for="(row, key, index) in vbt_data.rows" :key="index" :row="row" :selectedItems="selected_items" :columns="vbt_data.columns" :checkboxRows="checkbox_rows" @add-selected-item="addSelectedItem" @remove-selected-item="removeSelectedItem" :highlight-row-hover="highlight_row_hover" :highlight-row-hover-color="highlight_row_hover_color"></Row>
+                            <Row v-for="(row, key, index) in vbt_data.rows" :key="index" :row="row" :selectedItems="selected_items" :columns="vbt_data.columns" :checkboxRows="checkbox_rows" @add-selected-item="addSelectedItem" @remove-selected-item="removeSelectedItem" :highlight-row-hover="highlight_row_hover" :highlight-row-hover-color="highlight_row_hover_color" :rowsSelectable="rows_selectable"></Row>
                         </tbody>
                     </table>
                 </div>
@@ -82,7 +82,8 @@
                 checkbox_rows: false,
                 selected_items: [],
                 highlight_row_hover: false,
-                highlight_row_hover_color: "#d6d6d6"
+                highlight_row_hover_color: "#d6d6d6",
+                rows_selectable: false,
             };
         },
         mounted() {
@@ -134,6 +135,10 @@
                 if (_.has(this.config, 'highlight_row_hover_color')) {
                     this.highlight_row_hover_color = this.config.highlight_row_hover_color;
                 }
+
+                if (_.has(this.config, 'rows_selectable')) {
+                    this.rows_selectable = this.config.rows_selectable;
+                }
             },
 
             hasFilter(column) {