Introduction

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

Demo

Code

Javascript

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 },
		],
		rows: window.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">
				</div>
			</div>
			
			<div class="col-xs-12 table-responsive">
				<datatable :columns="columns" :data="rows" :filter="filter"></datatable>
				<datatable-pager v-model="page"></datatable-pager>
			</div>
		</div>
	</div>