Introduction
You can customize the appearance of your table by merging a Settings Props object in your Table Type, by using TableType.mergeSettings.
The example bellow shows a configuration for Bootstrap 3.3.
Demo
Code
Javascript
VuejsDatatable.useDefaultType( false )
.registerTableType( 'datatable', tableType => {
tableType.mergeSettings( {
table: {
class: 'table table-hover table-striped',
sorting: {
sortNone: '<i class="glyphicon glyphicon-sort"></i>',
sortAsc: '<i class="glyphicon glyphicon-sort-by-attributes"></i>',
sortDesc: '<i class="glyphicon glyphicon-sort-by-attributes-alt"></i>',
},
},
pager: {
classes: {
pager: 'pagination text-center',
selected: 'active',
},
icons: {
previous: '<i class="glyphicon glyphicon-chevron-left"></i>',
next: '<i class="glyphicon glyphicon-chevron-right"></i>',
},
},
} );
} );
new Vue( {
el: '#demo-app',
data: {
filter: '',
columns: [
{ label: 'id', field: 'id' },
{ label: 'Username', field: 'user.username' },
{ label: 'First Name', field: 'user.first_name' },
{ label: 'Last Name', field: 'user.last_name' },
{ label: 'Email', field: 'user.email' },
{
label: 'Address',
representedAs: row =>`${ row.address }<br />${ row.city }, ${ row.state }`,
interpolate: true,
sortable: false,
filterable: false,
},
],
rows: window.rows,
page: 1,
},
} );
HTML
<div class="grid-container" id="demo-app">
<div class="grid-x">
<div class="cell medium-4 large-3">
<label>Filter
<input type="text" v-model="filter" placeholder="Filter">
</label>
</div>
</div>
<div class="grid-x">
<div class="cell">
<datatable :filter="filter" :columns="columns" :data="rows"></datatable>
<datatable-pager v-model="page" type="short"></datatable-pager>
</div>
</div>
</div>