v
v
vue-bootstrap4-table
1.1.10
Search…
⌃K

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