.ui.vertical.stripe h3 {
font-size: 2em;
}
.secondary.pointing.menu .toc.item {
display: none;
}
.vuetable {
margin-top: 1em !important;
}
.vuetable-wrapper.ui.basic.segment {
padding: 0em;
}
.vuetable button.ui.button {
padding: .5em .5em;
font-weight: 400;
}
.vuetable button.ui.button i.icon {
margin: 0;
}
.vuetable th.sortable:hover {
color: #2185d0;
cursor: pointer;
}
.vuetable-actions, .custom-action {
width: 15%;
padding: 12px 0px;
text-align: center;
}
.vuetable-pagination {
background: #f9fafb !important;
}
.vuetable-pagination-info {
margin-top: auto;
margin-bottom: auto;
}
[v-cloak] {
display: none;
}
.highlight {
background-color: yellow;
}
.vuetable-detail-row {
height: 200px;
}
.detail-row {
margin-left: 40px;
}
.expand-transition {
transition: all .5s ease;
}
.expand-enter, .expand-leave {
height: 0;
opacity: 0;
}
tr.odd {
background-color: #e6f5ff;
}
body {
overflow-y: scroll;
}
List of Users
Go
Reset
Settings
Multisort (use Alt+Click)
Pagination:
vuetable-pagination
vuetable-pagination-dropdown
Per Page:
10
15
20
25
{{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize}}
api-url="http://vuetable.ratiw.net/api/users"
pagination-path=""
:pagination-component="paginationComponent"
wrapper-class="vuetable-wrapper ui basic segment"
table-wrapper=".vuetable-wrapper"
:fields="fields"
:sort-order="sortOrder"
:multi-sort="multiSort"
:item-actions="itemActions"
:per-page="perPage"
:append-params="moreParams"
detail-row-component="my-detail-row"
detail-row-id="id"
detail-row-transition="expand"
row-class-callback="rowClassCB"
>
$('#settingsModal').modal({
detachable: false,
onVisible: function() {
$('.ui.checkbox').checkbox()
}
}).modal('attach events', '#settingsBtn', 'show')
var tableColumns = [
// '__checkbox:id',
{
name: 'id',
title: '',
dataClass: 'center aligned',
callback: 'showDetailRow'
},
{
name: 'name',
title: 'Full Name',
sortField: 'name'
},
{
name: 'email',
sortField: 'email',
visible: true
},
{
name: 'nickname',
sortField: 'nickname',
callback: 'allCap'
},
{
name: 'birthdate',
sortField: 'birthdate',
callback: 'formatDate|D/MM/Y'
},
{
name: 'gender',
sortField: 'gender',
titleClass: 'center aligned',
dataClass: 'center aligned',
callback: 'gender'
},
{
name: '__component:custom-action',
title: "Component",
titleClass: 'center aligned',
dataClass: 'custom-action center aligned',
},
{
name: '__actions',
dataClass: 'center aligned',
}
]
Vue.config.debug = true
var E_SERVER_ERROR = 'Error communicating with the server'
Vue.component('custom-action', {
template: [
'
'',
'',
'',
'
].join(''),
props: {
rowData: {
type: Object,
required: true
}
},
methods: {
itemAction: function(action, data) {
sweetAlert('custom-action: ' + action, data.name)
},
onClick: function(event) {
console.log('custom-action: on-click', event.target)
},
onDoubleClick: function(event) {
console.log('custom-action: on-dblclick', event.target)
}
}
})
Vue.component('my-detail-row', {
template: [
'
'
'Name: ',
'{{rowData.name}}',
'
'
'Email: ',
'{{rowData.email}}',
'
'
'Nickname: ',
'{{rowData.nickname}}',
'
'
'Birthdate: ',
'{{rowData.birthdate}}',
'
'
'Gender: ',
'{{rowData.gender}}',
'
'
].join(''),
props: {
rowData: {
type: Object,
required: true
}
},
methods: {
onClick: function(event) {
console.log('my-detail-row: on-click')
}
},
})
new Vue({
el: '#app',
data: {
searchFor: '',
moreParams: [],
fields: tableColumns,
sortOrder: [{
field: 'name',
direction: 'asc',
}],
multiSort: true,
paginationComponent: 'vuetable-pagination',
perPage: 10,
// paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} รายการ',
itemActions: [
{ name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },
{ name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
{ name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }
]
},
watch: {
'perPage': function(val, oldVal) {
this.$broadcast('vuetable:refresh')
},
'paginationComponent': function(val, oldVal) {
this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)
}
},
methods: {
/**
* Callback functions
*/
allCap: function(value) {
return value.toUpperCase()
},
gender: function(value) {
return value == 'M'
? 'Male'
: 'Female'
},
formatDate: function(value, fmt) {
if (value == null) return ''
fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt
return moment(value, 'YYYY-MM-DD').format(fmt)
},
showDetailRow: function(value) {
var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'down' : 'right'
return [
'',
'',
''
].join('')
},
setFilter: function() {
this.moreParams = [
'filter=' + this.searchFor
]
this.$nextTick(function() {
this.$broadcast('vuetable:refresh')
})
},
resetFilter: function() {
this.searchFor = ''
this.setFilter()
},
changePaginationComponent: function() {
this.$broadcast('vuetable:load-success', this.$refs.vuetable.tablePagination)
},
preg_quote: function( str ) {
// http://kevin.vanzonneveld.net
// + original by: booeyOH
// + improved by: Ates Goral (http://magnetiq.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// * example 1: preg_quote("$40");
// * returns 1: '\$40'
// * example 2: preg_quote("*RRRING* Hello?");
// * returns 2: '\*RRRING\* Hello\?'
// * example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
// * returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\\|\:'
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\\|\:])/g, "\\$1");
},
highlight: function(needle, haystack) {
return haystack.replace(
new RegExp('(' + this.preg_quote(needle) + ')', 'ig'),
'$1'
)
},
rowClassCB: function(data, index) {
return (index % 2) === 0 ? 'odd' : 'even'
},
// -------------------------------------------------------------------------------------------
// You can change how sort params string is constructed by overriding getSortParam() like this
// -------------------------------------------------------------------------------------------
// getSortParam: function(sortOrder) {
// console.log('parent getSortParam:', JSON.stringify(sortOrder))
// return sortOrder.map(function(sort) {
// return (sort.direction === 'desc' ? '+' : '') + sort.field
// }).join(',')
// }
},
events: {
'vuetable:row-changed': function(data) {
console.log('row-changed:', data.name)
},
'vuetable:row-clicked': function(data, event) {
console.log('row-clicked:', data.name)
},
'vuetable:cell-clicked': function(data, field, event) {
console.log('cell-clicked:', field.name)
if (field.name !== '__actions') {
this.$broadcast('vuetable:toggle-detail', data.id)
}
},
'vuetable:action': function(action, data) {
console.log('vuetable:action', action, data)
if (action == 'view-item') {
sweetAlert(action, data.name)
} else if (action == 'edit-item') {
sweetAlert(action, data.name)
} else if (action == 'delete-item') {
sweetAlert(action, data.name)
}
},
'vuetable:load-success': function(response) {
var data = response.data.data
if (this.searchFor !== '') {
for (n in data) {
data[n].name = this.highlight(this.searchFor, data[n].name)
data[n].email = this.highlight(this.searchFor, data[n].email)
}
}
},
'vuetable:load-error': function(response) {
if (response.status == 400) {
sweetAlert('Something\'s Wrong!', response.data.message, 'error')
} else {
sweetAlert('Oops', E_SERVER_ERROR, 'error')
}
}
}
})