Introduction

You can customize the tempplate of the row by using the default slot in the Datatable component.

This slot uses 2 variables:

  1. row: The data object representing the current row.
  2. columns: The array of columns of this datatable.

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">
					
					<template scope="{ row }">
						<tr>
							<td>{{ row.id }}</td>
							<td>{{ row.user.username }}</td>
							<td>{{ row.user.first_name }}</td>
							<td>{{ row.user.last_name }}</td>
							<td>{{ row.user.email }}</td>
							<td>{{ row.address + ', ' + row.city + ', ' + row.state }}</td>
						</tr>
						<tr>
							<td colspan="7">
								<p>Some cool content here!</p>
							</td>
						</tr>
					</template>
				</datatable>
				<datatable-pager v-model="page"></datatable-pager>
			</div>
		</div>
	</div>