Vue Bootstrap Table

A sortable and searchable table, as a Vue component, using bootstrap styling.

Features

• Sortable
• Searchable
• Select display columns

Installation

Install the vue-bootstrap-table package package using npm:

npm install vue-bootstrap-table

Usage

 new Vue({
        el: '#app',
        components: {
            VueBootstrapTable: VueBootstrapTable
        },
        data: {
            columns: [
                {
                    title:"id",
                },
                {
                    title:"name",
                },
                {
                    title:"age",
                },
                {
                    title:"country",
                }
            ],
            values: [
                {
                    "id": 1,
                    "name": "John",
                    "country": "UK",
                    "age": 25,
                },
                {
                    "id": 2,
                    "name": "Mary",
                    "country": "France",
                    "age": 30,
                },
                {
                    "id": 3,
                    "name": "Ana",
                    "country": "Portugal",
                    "age": 20,
                }
            ]
        },
    });

    <vue-bootstrap-table
            :columns="columns"
            :values="values"
            :show-filter="true"
            :show-column-picker="true"
            :sortable="true"
    >
    </vue-bootstrap-table>

Check out the Demo and the Github page of jbaysolutions

Submitted by Gustavo Santos