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,
                }
            }
        },
        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