Prebuilt theme

This version of VueJS Datatable is shipped with a couple of presets for CSS framework you can use.

For now, following themes are available:

• bootstrap-3
• bootstrap-4

Once loaded, you can use the themed components named ${theme}-datatable for the table, and ${theme}-datatable-pager for the pager.

You can load up a theme using either

• the ESM version if importing it through a javascript file

    import 'vuejs-datatable/dist/themes/bootstrap-3.esm';

• the IIFE version if loading the theme directly, like via a CDN.

    <script src="vuejs-datatable/dist/vuejs-datatable.js" defer></script>
    <script src="vuejs-datatable/dist/themes/bootstrap-3.js" defer></script>

import Vue from 'vue';
import { TColumnsDefinition } from 'vuejs-datatable';

import { IPeople } from '../utils';

// Defined on window
declare var rows: IPeople[];
const app = new Vue( {
    el:   '#demo-app',
    data: {
        filter:  '',
        columns: [
            { label: 'ID', field: 'id', align: 'center', filterable: false },
            { label: 'Username', field: 'user.username' },
            { label: 'First Name', field: 'user.first_name' },
            { label: 'Last Name', field: 'user.last_name' },
            { label: 'Email', field: 'user.email', align: 'right', sortable: false },
            { label: 'Address', representedAs: row => `${ row.address  }, ${  row.city  }, ${  row.state }`, align: 'right', sortable: false },
        ] as TColumnsDefinition<IPeople>,
        rows,
        page: 1,
    },
} );

<div id="demo-app">
    <div class="row">
        <div class="col-xs-12 table-responsive">
            <bootstrap-3-datatable  :columns="columns" :data="rows" :filter="filter" :per-page="10"></bootstrap-3-datatable>
            <bootstrap-3-datatable-pager v-model="page"></bootstrap-3-datatable-pager>
        </div>
    </div>
    <div class="row">
    </div>
</div>