Multiple tables

Introduction

Datatable and pager can be associated with each other using the VueDatatable.name & VueDatatablePager.table property. Simply set the same value for both properties, and the pager will control the associated table.

Check out the Pager styles tutorial to see the different aspects available for the pager.
If you want to dynamically generate names from the host component, you can use the $vnode.tag property (TODO: Find a link or reference explaining what is this property, exactly... If you got a reference, please post a PR ;) ).

If the relation between the table and the pager is broken, the table will be displayed in no pager mode.

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

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

declare var rows: IPeople[];
const app = new Vue( {
    el:   '#demo-app',
    data: {
        filter:  '',
        filter2: '',
        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,
        page2: 1,
    },
    computed: {
        tables: () => ( Vue as any ).$datatables,
    },
} );

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="10"></datatable>
            <datatable-pager v-model="page"></datatable-pager>
        </div>
    </div>
    <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="filter2" placeholder="Filter" @keydown="$event.stopImmediatePropagation()">
            </div>
        </div>
        <div class="col-xs-12 table-responsive">
            <datatable name="second" :columns="columns" :data="rows" :filter="filter2" :per-page="10"></datatable>
            <datatable-pager table="second" v-model="page2"></datatable-pager>
        </div>
    </div>
</div>

Introduction

Demo

Code

Typescript

HTML