ezz-vue-datatable v1.0.5
ezz-vue-datatable
Datatable for vue js
installation
npm i ezz-vue-datatable
setup
import DataTable from 'ezz-vue-datatable';
import Vue from 'vue';
Vue.use(DataTable);
directive
data-table-online (online/live data query) data-table-offline (offline manual set of items)
example
<template>
<div>
<data-table-online
:headers="headers"
:url="http:\\localhost:8000/get-users"
:requestWith="{position: 'programmer'}">
<template #items="{item}">
<td align="center">{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.address}}</td>
<td>{{item.birthday}}</td>
<td>{{item.position}}</td>
<td align="center">
<button>
view
</button>
</td>
</template>
</data-table-online>
<data-table-offline
:headers="headers"
:items="items">
<template #items="{item}">
<td align="center">{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.address}}</td>
<td>{{item.birthday}}</td>
<td>{{item.position}}</td>
<td align="center">
<button>
view
</button>
</td>
</template>
</data-table-offline>
</div>
</template>
<script>
export default {
data : ()=>({
headers : [
{
text : 'Id',
align : 'center',
sortable : true,
value : 'id'
},
{
text : 'Name',
sortable : true,
value : 'name'
},
{
text : 'Sex',
sortable : true,
value : 'sex'
},
{
text : 'Address',
sortable : true,
value : 'address'
},
{
text : 'Birthday',
sortable : true,
value : 'birthday'
},
{
text : 'Position',
sortable : true,
value : 'roh_date'
},
{
text : 'Action',
align: 'center',
},
],
items : [
{
name : 'John Doe',
sex : 'Male',
address : 'New York City',
birthday : '1990-09-18',
position : 'Programmer'
},
{
name : 'Jane Doe',
sex : 'Female',
address : 'USA',
birthday : '2001-05-13',
position : 'Analyst'
},
{
name : 'Mikey Mousey',
sex : 'Male',
address : 'New York City',
birthday : '1998-10-11',
position : 'Programmer'
},
]
}),
}
</script>
common props
name: action description : to show action menu (entries option, status bar, pagination) type: boolean default: true
name: showEntriesOption description : to show number of entries option type: boolean default: true
name: headers description : header of the table type: array required : true properties : align (right, left, center), value (column), text (Header text), style, class
name: search description : enable/disable search bar type: boolean required: false default : true
name: tableClass description :table class type: array required: false default: 'table', 'table-default', 'table-sm', 'table-bordered', 'table-hover', 'table-striped'
name: searchString description : search string value type: String required: true default: null
name: pageStart description : starting page type: Number required: false default: 1
name: itemsPerPage description : Items per page to show type: Number required: false default: 10
name: maxPageVisible description : number of pages to show type: Number required: false default: 5
name: entriesOptions description : option for items per page type: array required: false default: 10,15,20,50,100, -1
name: noResultsText description : text for no result found type: String required: false default: 'No data found'
name: loadingText description : loading text type: String required: false default: 'Loading data. Please wait...'
name: nextText description : pagination next button text type: String required: false default: '»'
name: prevText description : pagination previous button text type: string required: false default: '«'
name: lastText description : pagination Last page button text type: String required: false default: '→'
name: firstText description : pagination First page button text type: String required: false default: '←'
name: showSelect description : select option (both header and table items) type: boolean required: false default: false
name: singleSelect description : show select option (table rows only) type: Boolean required: false default: false
name: showLoading description : show loading animation type: Boolean required: false default: true
online props
name: url description : url where to get the data type: string required : true
name: requestWith description : additional http request data to server type: Object required: false default: {}
common slots
top - top slots entries-before - before entry options entries-after -after entry options search-before - before search bar search-after - after search bar header - to overide header items - to overide items bottom - bottom slots pagination-before - before pagination slot pagination - pagination slot pagination-after - after pagination slot status-bar - status bar slot
online slot scopes
item (items slot only) - get item on items slot items (all slot) - get all items headers (all slot) - get header data selected (all slot) - get selected data allSelected (all slot) - check if all items are selected range (all slot) - pagination range sort (all slot) - method to sort items refresh (all slot) - method to refresh data select (all slot) - method to select item data (all slot) - get component data instance (all slot) - get component instance from (all slot) - status from data to (all slot) - status to data totalResults (all slot) - status total Results setPage (all slot) - method to set page totalPages (all slot) - get total pages page (all slot) - get current page
offline slot scopes
item (items slot only) - get item on items slot items (all slot) - get all items headers (all slot) - get header data selected (all slot) - get selected data allSelected (all slot) - check if all items are selected range (all slot) - pagination range sort (all slot) - method to sort items select (all slot) - method to select item data (all slot) - get component data instance (all slot) - get component instance from (all slot) - status from data to (all slot) - status to data totalResults (all slot) - status total Results setPage (all slot) - method to set page totalPages (all slot) - get total pages outputItems (all slot) - get current page items entriesOptions (all slot) - get entries option (array) setPage (all slot) - set current page page (all slot) - get current page
(online) server requests
field : page description: page for pagination type: Int default: 1 required: true
field: result_per_page description: Result Per Page type: Int default: 10 required: true
field: search description: Search value type: String default: null required: true
field: orderBy description: Order By (db table column) type: String default: null
(online) datatable expected server response
type: json properties: type: success/error total_pages: Integer total_results: Integer data: result data (array)