# 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

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

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

{% endcode %}

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

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

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

{% endcode %}