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	-
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	""
row-action-def			Define the actions, which belongs to row	Array	[]
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
	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