Basic Usage

It is easy to include vue-bootstrap4-table as a component in your application.

Import VueBootstrap4Table component in any of your vue component and start using it right away.

Note: If you included the library via CDN, then you don't need to import, you can use vue-bootstrap4-table component right away.

rows and columns props should be passed down to vue-bootstrap4-table component to work with the table.

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: [{
                        "id": 1,
                        "name": {
                            "first_name": "Vladimir",
                            "last_name": "Nitzsche"
                        },
                        "address": {
                            "country": "Mayotte"
                        },
                        "email": "[e-mail]",
                    },
                    {
                        "id": 2,
                        "name": {
                            "first_name": "Irwin",
                            "last_name": "Bayer"
                        },
                        "age": 23,
                        "address": {
                            "country": "Guernsey"
                        },
                        "email": "[e-mail]",
                    },
                    {
                        "id": 3,
                        "name": {
                            "first_name": "Don",
                            "last_name": "Herman"
                        },
                        "address": {
                            "country": "Papua New Guinea"
                        },
                        "email": "[e-mail]",
                    }],
                columns: [{
                        label: "id",
                        name: "id",
                        filter: {
                            type: "simple",
                            placeholder: "id"
                        },
                        sort: true,
                    },
                    {
                        label: "First Name",
                        name: "name.first_name",
                        filter: {
                            type: "simple",
                            placeholder: "Enter first name"
                        },
                        sort: true,
                    },
                    {
                        label: "Email",
                        name: "email",
                        sort: true,
                    },
                    {
                        label: "Country",
                        name: "address.country",
                        filter: {
                            type: "simple",
                            placeholder: "Enter country"
                        },
                    }],
                config: {
                    checkbox_rows: true,
                    rows_selectable: true,
                    card_title: "Vue Bootsrap 4 advanced table"
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>