# Server mode

In server mode, client side filtering, sorting, global search and pagination will be disabled. Instead your server will do all this and returns only the processed response. New response will update the rows in the table.

## Example

```javascript
<template>
    <div id="app">
        <vue-bootstrap4-table :rows="rows"
                              :columns="columns"
                              :config="config"
                              @on-change-query="onChangeQuery"
                              :total-rows="total_rows">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'
    export default {
        name: 'App',
        data: function() {
            return {
                rows: [],
                columns: [
                ...
                ],
                config: {
                    ...
                    server_mode: true // by default false
                    ...
                },
                queryParams: {
                    sort: [],
                    filters: [],
                    global_search: "",
                    per_page: 10,
                    page: 1,
                },
                total_rows: 0,
            }
        },
        methods: {
            onChangeQuery(queryParams) {
                this.queryParams = queryParams;
                this.fetchData();
            },
            fetchData() {
                let self = this;
                axios.get('http://example.com/search', {
                        params: {
                            "queryParams": this.queryParams,
                            "page": this.queryParams.page
                        }
                    })
                    .then(function(response) {
                        self.rows = response.data.data;
                        self.total_rows = response.data.total;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }

        },
        components: {
            VueBootstrap4Table
        },
        mounted() {
            this.fetchData();
        },
    }
</script>

<style>

</style>

```

### **Step 1**

In your application you should have the below information in **`data.`**

```javascript
queryParams: {
    sort: [],
    filters: [],
    global_search: "",
    per_page: 10,
    page: 1,
},
total_rows: 0,
```

### **Step 2**

If you want to work with pagination, then don't forget to set **`total_rows`** as prop to **`total-rows`**.

Then listen for the event **`on-change-query`**. &#x20;

```javascript
<vue-bootstrap4-table :rows="rows"
        :columns="columns"
        :config="config"
        @on-change-query="onChangeQuery"
        :total-rows="total_rows">
</vue-bootstrap4-table>
```

### Step 3

Wherever there is a change in table query params, you will get your new query params in your **`onChangeQuery`** function. With the new values update your **`queryParams`** and fetch new data from server.

```javascript
onChangeQuery(queryParams) {
    this.queryParams = queryParams;
    this.fetchData();
},
```

### Step 4

I assume you are using **`axios`** library for handling ajax requests.

Once you have the new updated result, update **rows** with new data and also update **`total_rows`** with the total number of records.

```javascript
fetchData() {
    let self = this;
    axios.get('http://example.com/search', {
            params: {
                "queryParams": this.queryParams,
                "page": this.queryParams.page
            }
        })
        .then(function(response) {
            self.rows = response.data.data;
            self.total_rows = response.data.total;
        })
        .catch(function(error) {
            console.log(error);
        });
}
```

{% hint style="info" %}
To get best performance, it is recommended to mention in column config that which column have unique values. You can refer the below example.
{% endhint %}

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

```javascript
columns: [
    ...
    {
        label: "id",
        name: "id",
        filter: {
            type: "simple",
            placeholder: "Enter id"
        },
        sort: true,
        uniqueId: true // like this
    }
    ... 
]
```

{% endcode %}