vue-md-powerful-datatable
A Vue.js 2.0 Component
Development
Roadmap
- Refactor general code (from ugly for loops to array functions etc 🙄)
- Add tests (jest maybe?)
- Refactor prop names
- Refactor CSS
Prerequisites
-
nodeJS
-
VueJS material-design
$ npm i vue-material -
VueJS material-design-lite
$ npm install vue-mdl
Usage
Installation
$ npm install vue-md-powerful-datatable
$ yarn add vue-md-powerful-datatable
Use component
-
add material design icons to html
-
add to components:
;...components:VueMdPowerfulDatatable -
add md libs to Vue init script:
;;;Vue;Vuematerial;;; -
in template:
-
data and headData in parent component
birds:name: 'Birdy'variety: 'Eagle'size: 330wingCount: 15name: 'Rosa'variety: 'Peacock'size: 630wingCount: 2birdsHeadData:key: 'name'name: 'Birds Name'key: 'variety'name: 'Birds variety'key: 'size'name: 'Size of Bird'{ // dynamically change formatif valuereturn ` mm`;return '';}key: 'wingCount'name: 'Number of wings'
Props
property name | description | type | example |
---|---|---|---|
data | actual table data | Array | [{ name: 'test', anotherKey: 'asd', ... }, ...] |
headData | table header information | Array | [{ key: 'name', // object's key name: 'Birds Name' // column title }] |
max | number of rows per page, default: 20 | Number | |
ignoreColumns | hide data columns | Array | ['anotherKey', ...] |
search | enable search, default: true | Boolean | |
pager | enable pagination, default: true | Boolean | |
sortable | enable sort, default: true | Boolean | |
selectable | enable selectable rows (selectedRowIndexKey must be provided on true), default: false | Boolean | |
selectedRowIndexKey | key name for selecting lines | String | 'name' |
selectAllOnlyOnPage | the "select all" checkbox in table header will only select rows on current page | Boolean | false |
Events
event name | description | arguments |
---|---|---|
rowSelectionChange | Will be emitted everytime a row is selected or deselected | Array of keys of selected lines |
Use selectable feature
-
in template:
<!-- last 3 attributes to use feature --> -
in methods:
...methods:...{console;}......