Clickable table

Author: zemkogabor

dev/pages/Home.vue

@@ -185,10 +185,12 @@
     order-by="id"
     :sort-desc="false"
     :is-loading="false"
+    row-clickable
+    @row-clicked="onRowClicked"
   >
     <template #td="data">
       <span v-if="data.field === 'action'">
-        <button type="button" class="btn btn-primary">Download</button>
+        <button type="button" class="btn btn-primary" @click.stop="onTableButtonClicked">Download</button>
       </span>
       <template v-else>
         {{ data.value }}
@@ -358,6 +360,12 @@ export default defineComponent({
       // event.preventDefault()
       console.log(event)
     },
+    onRowClicked(row: { id: number; name: string }): void {
+      console.log('Row clicked', row)
+    },
+    onTableButtonClicked() {
+      console.log('Only button clicked (because of @click.stop)')
+    },
   },
 })
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "description": "Bootstrap 5 components in Vue3 wrapper.",
   "module": "./dist/bootstrap-vue-wrapper.js",
   "types": "./dist/index.d.ts",

src/components/bs-table/BsTable.vue

@@ -40,7 +40,8 @@
         v-for="(item, key) in items"
         v-else
         :key="key"
-        :class="item.trClass"
+        :class="[item.trClass || '', { 'cursor-pointer': rowClickable }]"
+        @click="$emit('rowClicked', item)"
       >
         <template v-for="field in fields" :key="field.key">
           <td
@@ -118,8 +119,15 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    /**
+     * row is clickable
+     */
+    rowClickable: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['orderChanged'],
+  emits: ['orderChanged', 'rowClicked'],
   methods: {
     /**
      * Is order by active by field?