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

RefreshButtonExample.vue

<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

SlotExample.vue

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