generating custom action buttons based on initial config and emit events

Author: rubanraj54

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config" @on-select-rows="onSelectRows" @refresh-data="onRefreshData">
+        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config" :actions="actions" @on-select-rows="onSelectRows" @refresh-data="onRefreshData" @on-test="testone">
             <template slot="pagination-info" slot-scope="props">
                     This page total is {{props.currentPageRowsLength}} |
                     Filterd results total is {{props.filteredRowsLength}} |
@@ -90,13 +90,33 @@
                     per_page_options: [1, 15, 20, 30],
                     show_reset_button: true,
                     show_refresh_button: true,
-                }
+                },
+                msg : "msg from parent",
+                actions: [
+                    {
+                        btn_text: "test",
+                        event_name: "on-test",
+                        event_payload: {
+                            msg: "my custom msg"
+                        }
+                    },
+                    {
+                        btn_text: "test2",
+                        event_name: "on-test-two"
+                    },
+                    {
+                        btn_text: "test3",
+                        event_name: "on-test-three"
+                    }
+                ],
             }
         },
         methods: {
             onSelectRows(payload) {
                 console.log(payload);
-
+            },
+            testone(payload) {
+                console.log(payload);
             },
             onRefreshData() {
                 let dummy = [{

src/components/VueBootstrap4Table.vue

@@ -12,6 +12,7 @@
                         <tr>
                             <th :colspan="headerColSpan">
                                 <div class="row" v-if="global_search.visibility">
+                                    <!-- global search text starts here -->
                                     <div class="input-group col-md-2">
                                         <input ref="global_search" type="text" class="form-control" :placeholder="global_search.placeholder" @keyup.stop="updateGlobalSearch($event)">
                                         <div class="input-group-append vbt-global-search-clear" @click="clearGlobalSearch">
@@ -22,6 +23,9 @@
                                             </span>
                                         </div>
                                     </div>
+                                    <!-- global search text ends here -->
+
+                                    <!-- refresh & reset button starts here -->
                                     <div class="btn-group col-md-1" role="group" aria-label="Basic example">
                                         <button v-if="show_refresh_button" type="button" class="btn btn-secondary" @click="$emit('refresh-data')">
                                             <slot name="refresh-button-text">
@@ -34,6 +38,16 @@
                                             </slot>
                                         </button>
                                     </div>
+                                    <!-- refresh & reset button ends here -->
+
+                                    <!-- action buttons starts here -->
+                                    <div class="btn-group col-md-9 justify-content-end" role="group" aria-label="Basic example">
+                                        <button v-for="(action, key, index) in actions" :key="index" type="button" class="btn btn-secondary" @click="$emit(action.event_name,action.event_payload)">
+                                            {{action.btn_text}}
+                                        </button>
+                                    </div>
+                                    <!-- action buttons button ends here -->
+
                                 </div>
                             </th>
                         </tr>
@@ -213,7 +227,13 @@ export default {
             default: function () {
                 return {};
             }
-        }
+        },
+        actions: {
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
     },
     data: function () {
         return {