vue-data-tables

vue2.0 DataTables, based on element-ui, el-table + el-pagination + custom filter and sort

Online demo

Install ElementUI and vue-data-tables

npm install element-ui

npm install vue-data-tables

Usage

import to your project as plugin.
```
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import DataTables from 'vue-data-tables'

Vue.use(ElementUI)
Vue.use(DataTables)
```
If you don't want import the whole element-ui, you can just load corresponding components refer to On demand section of element-ui doc

This lib depends on the following components:
- el-table
- el-table-column
- el-row
- el-col
- el-input
- el-button
- el-pagination
- el-checkbox
- el-checkbox-group

use in your project.

<template>
  <data-tables
    :data='tableData',    
    :tool-bar-def='toolBarDef',
    :row-action-def='rowActionsDef',
    @row-click='rowClick'>
    <el-table-column prop="flow_no"
      label="服务编号"
      sortable="custom">
    </el-table-column>
    <el-table-column
      prop="flow_no"
      label="服务编号"
      sortable="custom">
    </el-table-column>
  </data-tables>
</template>

Attributes

Property	layer1 sub proptery	layer2 sub proptery	Desc	Type	Default values
data			The data array which will be render in the table.	Array	-
border			whether table has vertical border.	Boolean	true
stripe			whether table is striped.	Boolean	true
tableProps			an object to pass any proptery to el-table. refer to el-table proptery	Object	undefined
actions-def			Define the actions, which belongs to table.	Object	-
	width		grid(24 grids) width of actions bar. actions bar, checkbox and searchbox are in a el-row as el-cols	Number	5
	offset		offset of actions bar	Number	0
	def		Define the actions	Array	[]
		name	the ation button label text	String	-
		icon	icon of the button	String	-
		handler	handler of the click	Function	-
checkbox-filter-def			Define the checkbox filter	Object	-
	width		grid width of checkbox	Number	14
	offset		grid offset of checkbox	Number	0
	props		Indicate proptery[s] in the data which will be used to filter data by checkbox filter.	String \| Array	[]
	filterFunction		customize filter function	Function	-
	def		grid offset of checkbox	Array	[]
		name	the checkbox label text	String	-
		code	the value of this checkbox stands for	String	-
search-def			Define the search box	Object	-
	show		show or hide search box	Boolean	true
	props		indicate proptery[s] in the data which will be used to filter data by search box.	Array \| String	All
	width		grid width of search box	Number	5
	offset		grid offset of search box	Number	0
	filterFunction		customize filter function	Function	-
	placeholder		searchbox placeholder	String	""
action-col-fixed			Determine wether action column is fixed. left means action column fix to left, right means action column fix to right. undefined means not fix	String	undefined
row-action-def			Define the actions, which belongs to row	Array	[]
	name		the row action button text	String	-
	type		type of the button	String	text
	buttonProps		an object to pass any proptery to el-button. refer to el-button proptery	Function	-
	handler		handler of the click	Function	-
action-col-width			Define the min-width of the action column. unit: px.	String	-
col-not-row-click			indicated column[s] which can not trigger row click	String \| Array	the action column
has-action-col			Determine wether show action column	Boolean	true
action-col-label			indicated the header text of the action column	String	"操作"
pagination-def			define pagination.	Object	-
	layout		refer to Elmeme Doc	String	[prev, pager, next, jumper, sizes, total]
	pageSize		refer to Elmeme Doc	Number	20
	pageSizes		refer to Elmeme Doc	Array	[20, 50, 100]
	currentPage		refer to Elmeme Doc	Number	1

For details, check the Demo and Demo Code.

Event

Event	Desc	params
row-click	Emit when row is clicked	row, event, column
selection-change	Emit when selection is changed	currentRow, oldCurrentRow
select	Emit when row is selected	selection
select-all	Emit when select-all is clicked	selection
filtered-data	Emit when filter condition changes	filteredData

For details, check the Demo and Demo Code.

Dev

# install dependencies
npm install

# serve test/play with hot reload at localhost:8080
npm run play

# serve docs with hot reload at localhost:8080
npm run dev

vv-boy/vue-data-tables

vue-data-tables

Online demo

Install ElementUI and vue-data-tables

Usage

Attributes

Event

Dev