Multiple tables | vuejs-datatable

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.

Demo

ID ↕	Username ↕	First Name ↕	Last Name ↕	Email	Address
1	dprice0	Daniel	Price	dprice0@blogs.com	3 Toban Park, Pocatello, Idaho
2	dgreen1	Doris	Green	dgreen1@elpais.com	4210 Portage Trail, Mobile, Alabama
3	njohnston2	Nicholas	Johnston	njohnston2@tiny.cc	94 Hanson Trail, Brooklyn, New York
4	rlee3	Ronald	Lee	rlee3@shareasale.com	54915 Ludington Park, Salt Lake City, Utah
5	jcox4	Jose	Cox	jcox4@sitemeter.com	9 South Parkway, Glendale, Arizona
6	eward5	Ernest	Ward	eward5@imageshack.us	72 Shelley Plaza, Whittier, California
7	phall6	Patrick	Hall	phall6@github.com	27773 Orin Hill, Fort Lauderdale, Florida
8	lnichols7	Lawrence	Nichols	lnichols7@home.pl	03444 Harbort Trail, Syracuse, New York
9	hperkins8	Heather	Perkins	hperkins8@addtoany.com	1086 Myrtle Pass, White Plains, New York
10	jwoods9	Jonathan	Woods	jwoods9@blogs.com	5697 Leroy Street, Akron, Ohio

ID ↕	Username ↕	First Name ↕	Last Name ↕	Email	Address
1	dprice0	Daniel	Price	dprice0@blogs.com	3 Toban Park, Pocatello, Idaho
2	dgreen1	Doris	Green	dgreen1@elpais.com	4210 Portage Trail, Mobile, Alabama
3	njohnston2	Nicholas	Johnston	njohnston2@tiny.cc	94 Hanson Trail, Brooklyn, New York
4	rlee3	Ronald	Lee	rlee3@shareasale.com	54915 Ludington Park, Salt Lake City, Utah
5	jcox4	Jose	Cox	jcox4@sitemeter.com	9 South Parkway, Glendale, Arizona
6	eward5	Ernest	Ward	eward5@imageshack.us	72 Shelley Plaza, Whittier, California
7	phall6	Patrick	Hall	phall6@github.com	27773 Orin Hill, Fort Lauderdale, Florida
8	lnichols7	Lawrence	Nichols	lnichols7@home.pl	03444 Harbort Trail, Syracuse, New York
9	hperkins8	Heather	Perkins	hperkins8@addtoany.com	1086 Myrtle Pass, White Plains, New York
10	jwoods9	Jonathan	Woods	jwoods9@blogs.com	5697 Leroy Street, Akron, Ohio

Code

Typescript

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>