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)