Custom action buttons

You can add your custom buttons in the table by actions props and listen for their events in your component.

Example

CustomActionButtonExample.vue

<template>
    <div id="app">
        <vue-bootstrap4-table :rows="rows" 
                                :columns="columns" 
                                :config="config"
                                :actions="actions"
                                @on-download="onDownload">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'

    export default {
        name: 'App',
        data: function() {
            return {
                rows: [
                ...
                ],
                columns: [
                ...
                ],
                actions: [
                    {
                        btn_text: "Download",
                        event_name: "on-download",
                        class: "btn btn-primary my-custom-class",
                        event_payload: {
                            msg: "my custom msg"
                        }
                    }
                ],
                config: {
                    ...
                }
            }
        },
        methods: {
            onDownload(payload) {
                console.log(payload);
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

Each action object should contain the below attributes.

Attributes details

Attributes	Description	type	Default
btn_name	Display name for the button	String	" "
event_name	Name of the event that you want to listen back (Mandatory)	String	undefined
class	Class which you want to override default button classes	String	" "
event_payload	Payload you want to send with the event	Any	undefined