# Config

You can optionally pass config as a prop to **`vue-bootstrap4-table`** component to override the table configuration defaults.

## Example

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

```javascript
<template>
    <div id="app">
        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'

    export default {
        name: 'App',
        data: function() {
            return {
                rows: [
                ...
                ],
                columns: [
                ...
                ],
                config: {
                    card_mode: true,
                    selected_rows_info: false,
                    pagination: true,
                    pagination_info: true, 
                    num_of_visibile_pagination_buttons: 7,
                    per_page: 5, 
                    checkbox_rows: true, 
                    highlight_row_hover: true, 
                    rows_selectable: true, 
                    multi_column_sort: true,
                    highlight_row_hover_color:"grey",
                    card_title: "Vue Bootsrap 4 advanced table",
                    global_search: {
                        placeholder: "Enter custom Search text",
                        visibility: true,
                        case_sensitive: false
                    },
                    per_page_options: [5, 10, 20, 30],
                    show_refresh_button: true,
                    show_reset_button: true,
                    server_mode: true,
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>
```

{% endcode %}

{% hint style="info" %}
If you don't provide an attribute in the config, then default value will be assigned to that attribute.
{% endhint %}

## &#x20;Attributes details

| Attributes                             | Description                                                                                              | type             | Default             |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------- | ---------------- | ------------------- |
| card\_mode                             | You can choose between table surrounded with card layout and plain default table alone.                  | Boolean          | true                |
| pagination                             | Enable/Disable pagination in the table                                                                   | Boolean          | true                |
| pagination\_info                       | Enable/Disable pagination info in the table                                                              | Boolean          | true                |
| selected\_rows\_info                   | Enable/Disable number of rows selected info in the table                                                 | Boolean          | false               |
| num\_of\_visibile\_pagination\_buttons | Limit the number of visible pagination buttons in the pagination bar                                     | Number           | 5                   |
| per\_page                              | Number of rows to display per page                                                                       | Number           | 10                  |
| checkbox\_rows                         | Enable/Disable checkbox in each rows                                                                     | Boolean          | false               |
| highlight\_row\_hover                  | Enable/Disable highlighting row on hover                                                                 | Boolean          | true                |
| rows\_selectable                       | Enable/Disable selecting items on row click                                                              | Boolean          | false               |
| multi\_column\_sort                    | Enable/Disable multi column sorting                                                                      | Boolean          | false               |
| highlight\_row\_hover\_color           | Change the row hover highlighting color                                                                  | String           | "#d6d6d6"           |
| card\_title                            | Sets the table title in the card header                                                                  | String           | "" (empty string)   |
| global\_search.placeholder             | Placeholder is **`hint`** text for search text box                                                       | String           | "Enter search text" |
| global\_search.visibility              | Show/Hide global search text input                                                                       | Boolean          | true                |
| global\_search.case\_sensitive         | Enable/Disable case sensitive searching.                                                                 | Boolean          | false               |
| per\_page\_options                     | List of options to choose how many rows being showed in single page                                      | Array of numbers | \[5,10,15]          |
| 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                |
| server\_mode                           | Enable/Disable server side processing (Sorting, Filtering, Global search & pagination)                   | Boolean          | false               |