Refresh and Reset button
Refresh Button
Refresh button emits a refresh event to your application (parent component). You can listen for this event and make ajax call for new data and update rows
data. Table will receive the new data and update the rows with current queries.
Example
<template>
<div id="app">
<vue-bootstrap4-table :rows="rows"
:columns="columns"
:config="config"
@refresh-data="onRefreshData">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
name: 'App',
data: function() {
return {
rows: [
...
],
columns: [
...
],
config: {
...
show_refresh_button: true, // default is also true
...
}
}
},
methods: {
onRefreshData() {
// you can make ajax call here for new data and
// set result to this.rows
}
},
components: {
VueBootstrap4Table
}
}
</script>
Reset button
Reset button resets currently applied sorting, filtering, and global search
queries.
By default reset button is enabled. If you would like to disable reset button, set show_reset_button
to false
in initial config.
Attributes details
Attributes
Description
type
Default
show_refresh_button
Show/Hide Refresh button
Boolean
true
show_reset_button
Show/Hide Refresh button. Resets all query (sort, filter, global search) currently applied in the table.
Boolean
true
Slots
Button text and icons
You can override the text in the refresh & reset buttons with slots refresh-button-text
& reset-button-text.
If you like, you can add icon to the buttons.
Example
...
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
<template slot="refresh-button-text">
<i class="fas fa-sync-alt"></i> My refresh
</template>
<template slot="reset-button-text">
<i class="fas fa-broom"></i> My reset
</template>
</vue-bootstrap4-table>
...
Last updated
Was this helpful?