vue-data-tables

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

Online demo

• Demo

• Demo Code

Install ElementUI and vue-data-tables

npm install element-ui

npm install vue-data-tables

Usage

1. 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

2. 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	-
tableProps			An object to properties to el-table. refer to el-table proptery	Object	-
col-not-row-click			indicated column[s] which can not trigger row click	String | Array	the action column
actions-def			Define the actions, which belongs to table.	Object	-
	colProps		Actions bar, checkbox and searchbox are in a el-row as el-cols. An object to properties to el-col. refer to el-col proptery	Object	-
	def		Define the actions	Array	[]
		name	the ation button label text	String	-
		icon	icon of the button	String	-
		buttonProps	An object to properties to el-button. refer to el-button proptery	Object	-
		handler	handler of the click	Function	-
checkbox-filter-def			Define the checkbox filter	Object	-
	colProps		Actions bar, checkbox and searchbox are in a el-row as el-cols An object to properties to el-col. refer to el-col proptery	Object	-
	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
	colProps		Actions bar, checkbox and searchbox are in a el-row as el-cols An object to properties to el-col. refer to el-col proptery	Object	-
	props		indicate proptery[s] in the data which will be used to filter data by search box.	Array | String	All
	filterFunction		customize filter function	Function	-
	inputProps		An object to properties to el-input. refer to el-input proptery	Object	-
actionColDef			Define action column	Object	-
	show		Determine wether show action column	Boolean	true
	tableColProps		An object to pass properties to el-table-column. refer to el-button proptery	Object	-
	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 properties to el-button. refer to el-button proptery	Object	-
		handler	handler of the click	Function	-
pagination-def			define pagination. refer to el-pagination proptery	Object	-
	layout			String	[prev, pager, next, jumper, sizes, total]
	pageSize			Number	20
	pageSizes			Array	[20, 50, 100]
	currentPage			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