Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vuetable CSS for Bootstrap4
export default {
table: {
tableWrapper: '',
tableHeaderClass: 'mb-0',
tableBodyClass: 'mb-0',
tableClass: 'table table-bordered table-hover',
loadingClass: 'loading',
ascendingIcon: 'fa fa-chevron-up',
descendingIcon: 'fa fa-chevron-down',
ascendingClass: 'sorted-asc',
descendingClass: 'sorted-desc',
sortableIcon: '',
detailRowClass: 'vuetable-detail-row',
handleIcon: 'fa fa-bars text-secondary',
renderIcon(classes, options) {
return `<i class="${classes.join(' ')}"></i>`
}
},
pagination: {
wrapperClass: 'pagination float-right',
activeClass: 'active',
disabledClass: 'disabled',
pageClass: 'page-item',
linkClass: 'page-link',
paginationClass: 'pagination',
paginationInfoClass: 'float-left',
dropdownClass: 'form-control',
icons: {
first: 'fa fa-chevron-left',
prev: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
last: 'fa fa-chevron-right',
}
}
}
export default {
table: {
tableWrapper: '',
tableHeaderClass: 'mb-0',
tableBodyClass: 'mb-0',
tableClass: 'table table-bordered table-hover',
loadingClass: 'loading',
ascendingIcon: 'ion ion-ios-arrow-up',
descendingIcon: 'ion ion-ios-arrow-down',
ascendingClass: 'sorted-asc',
descendingClass: 'sorted-desc',
sortableIcon: '',
detailRowClass: 'vuetable-detail-row',
handleIcon: 'ion-navicon-round text-secondary',
renderIcon(classes, options) {
return `<i class="${classes.join(' ')}"></i>`
}
},
pagination: {
wrapperClass: 'pagination float-right',
activeClass: 'active',
disabledClass: 'disabled',
pageClass: 'page-item',
linkClass: 'page-link',
paginationClass: 'pagination',
paginationInfoClass: 'float-left',
dropdownClass: 'form-control',
icons: {
first: 'ion ion-chevron-left',
prev: 'ion ion-chevron-left',
next: 'ion ion-chevron-right',
last: 'ion ion-chevron-right',
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment