vue-table-helper v1.1.6

vue-table-helper

A wrapper for the <b-table> component of BootstrapVue. Adds pagination, column selection, research input, full screen mode and CSV export.

Prerequisites

You need to have installed Bootstrap 4 and BootstrapVue:

npm install --save bootstrap bootstrap-vue

Installation

npm install --save vue-table-helper

Usage

Import the component and register globally

import VueTablehelper from 'vue-table-helper'
import 'vue-table-helper/dist/vue-table-helper.css'

Vue.use(VueTablehelper);

Example of use

<template>
    <div id="app">
        <vue-table-helper :fields="fields" :items="items">
        </vue-table-helper>
    </div>
</template>

<script>
    import VueTablehelper from 'vue-table-helper'
    import 'vue-table-helper/dist/vue-table-helper.css'

    Vue.use(VueTablehelper);

    export default {
        name: 'app',
        data() {
            return {
                items: [
                    {id: 0, first_name: 'John', last_name: 'Doe', age: 40},
                    {id: 0, first_name: 'Adam', last_name: 'Smith', age: 40},
                    {id: 0, first_name: 'Stan', last_name: 'Lee', age: 10}
                ],
                fields: [
                    {key: 'id', label: 'ID', sortable: true, hidden: true},
                    {key: 'first_name', label: 'First name', sortable: false},
                    {key: 'last_name', label: 'Last name', sortable: true},
                    {key: 'age', label: 'Age', sortable: true}
                ]
            }
        }
    }
</script>