# Custom action buttons

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

## Example

{% code title="CustomActionButtonExample.vue" %}

```javascript
<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>
```

{% endcode %}

Each action object should contain the below attributes.

## Attributes details <a href="#attributes-details" id="attributes-details"></a>

| 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 |