README
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)