No pager | vuejs-datatable

Introduction

The VueDatatablePager is the component in charge of controling pagination of a VueDatatable.

If you do not link a VueDatatablePager to your VueDatatable, then the table will show all rows without pagination, without taking into account the per-page prop.

Check out the Pager types tutorial to see the different aspects available for the pager. You can also learn more on how to manage multiple tables with pagers on the same page.

Demo

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

HTML

<div id="demo-app" style="max-height: 500px;overflow-y: auto;overflow-x: hidden;">
    <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>
        </div>
    </div>
</div>