1.1.10

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

Previousvbt-classesNextServer mode

Last updated