Basic table

Introduction

Here is the bare minimum example to use vuejs-datatable. You can check out other tutorials for more advanced usages.

Demo

Code

Typescript

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,
    },
} );

HTML

<div id="demo-app">
    <div class="row">
        <div class="col-xs-12 form-inline">
            <div class="form-group">
                <label for="filter" class="sr-only">Filter</label>
                <input type="text" class="form-control" v-model="filter" placeholder="Filter" @keydown="$event.stopImmediatePropagation()">
            </div>
        </div>

        <div class="col-xs-12 table-responsive">
            <datatable :columns="columns" :data="rows" :filter="filter" :per-page="25"></datatable>
            <datatable-pager v-model="page"></datatable-pager>
        </div>
    </div>
</div>