stevefontaine/vue-data-tables

vue2.0 datatables，based on element-ui, el-table + el-pagination + filter + sort

vue-data-tables

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

online demo and example

• Demo

• Example

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)

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	Desc	Type	default values
data	The data array which will be render in the table.	Array	-
actions-def	Define the table actions.	Object	{ def: [], width: 5, offset: 0 }
checkbox-filter-def	Define checkbox filter	Object	{ props: undefined, def: [], width: 14, offset: 0, filterFunction: undefined}
row-action-def	Define actions of every row	Array	-
search-def	Define search bar	Object	{show: true, props: undefined, filterFunction: undefined, width: 5, offset: 0}
action-col-width	Define min width of action column	Object	-
has-action-col	Determine wether show action column	Boolean	true
col-not-row-click	Indicate the columns which do not trigger row-click	Array	the action column

For details, check the example.

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

Dev

# install dependencies
npm install

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