Introduction
You can customize the tempplate of the row by using the default
slot in the Datatable component.
This slot uses 2 variables:
row
: The data object representing the current row.columns
: The array of columns of this datatable.
Demo
Some cool content here!
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>