Config

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

Example

App.vue

<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,
                    preservePageOnDataChange: true
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

If you don't provide an attribute in the config, then default value will be assigned to that attribute.

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
preservePageOnDataChange	Enable/Disable preserving current index of the page on data change. For example, if this option is set to true, consider that you are in page 4 and performed some actions like sorting or filtering, then now table gets a new data and still the pagination will be in page 4. If this config is set to false (default), for any data change current page in the pagination will be shifted to page 1.	Boolean	false