GitHub - syshex/vue-bootstrap-table: A sortable and searchable table, as a Vue component, using bootstrap styling.

vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.

Demo

Projects using vue-bootstrap-table

Draxed

Know of others? Create a PR to let me know!

Features

Sortable
Searchable
Select display columns
Pagination
On Table Editing

Requirements

Vue 1.* (tested with 1.0.26)
Bootstrap 3 css

Installation

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

npm install vue-bootstrap-table2

Or add the js script to your html (download from releases):

<script src="vue-bootstrap-table.js"></script>

Usage

    new Vue({
        el: '#app',
        components: {
            VueBootstrapTable: VueBootstrapTable
        },
        data: {
            columns: [
                {
                    title:"id",
                },
                {
                    title:"name",
                    visible: true,
                    editable: true,
                },
                {
                    title:"age",
                    visible: true,
                    editable: true,
                },
                {
                    title:"country",
                    visible: true,
                    editable: true,
                }
            ],
            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"
            :paginated="true"
    >
    </vue-bootstrap-table>

Configuration Props

    props: {
        /**
         * The column titles, required
         */
        columns: {
            type: Array,
            required: true,
        },
        /**
         * The rows, an Array of objects
         */
        values: {
            type: Array,
            required: true,
        },
        /**
         * Enable/disable table sorting, optional, default true
         */
        sortable: {
            type: Boolean,
            required: false,
            default: true,
        },
        /**
         * Enable/disable input filter, optional, default false
         */
        showFilter: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * Enable/disable column picker to show/hide table columns, optional, default false
         */
        showColumnPicker: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * Enable/disable pagination for the table, optional, default false
         */
        paginated: {
            type: Boolean,
            required: false,
            default: false,
        },
        /**
         * If pagination is enabled defining the page size, optional, default 10
         */
        pageSize: {
            type: Number,
            required: false,
            default: 10,
        },
    },

Column Array Definition

The columns array takes object of type:

{
    title:"country",  // Mandatory: Title to be presented on the Table
    visible: true,    // Optional: column visible? (Default: true)
    editable: false,  // Optional: column cells editable? (Default: false)
}

Column Definition Examples

Column with Title "Id" , which is visible but not editable:

Column with Title "Name" , which is visible and editable:

{
    title:"Name",
    visible: true,
    editable: true,
}

Events

cellDataModifiedEvent - When a cell is edited, an cellDataModifiedEvent event is dispatched.

Handling `cellDataModifiedEvent`

    events: {
        cellDataModifiedEvent: function( originalValue, newValue, columnTitle, entry) {

            this.logging.push("Original Value : " + originalValue +
                         " | New Value : " + newValue +
                         " | Column : " + columnTitle +
                         " | Complete Entry : " +  entry );

        },
    },

Contribute

If you have a feature request, please add it as an issue or make a pull request.

TODO List

Basic table
Sorting
Filter
Column picker
Pagination
Editing
Ajax
Responsive
Dates sorting
Keyboard navigation

Changelog

1.0.2

Pagination working
Editing cells on the table
Configuration Improvements

1.0.1

Bug fix

1.0.0

First version