An advanced data table plugin for vue.js and nuxt.js
npm install vue-listableVue-listable is an advanced data table plugin for vue.js.
Using NPM:
``bash`
npm install vue-listable --save
`javascript
import Vue from 'vue'
import VueListable from 'vue-listable'
Vue.use(VueListable)
`
Same for nuxt.js:
Create vue-listable.js in plugins directory:
`javascript
import Vue from 'vue'
import VueListable from 'vue-listable'
Vue.use(VueListable)
`
Then in nuxt.config.js:
`javascript`
module.exports = {
plugins: [
{
src: '~/plugins/vue-listable.js'
}
]
}
Inside template use listable component:
`html`
Type: Function
Default: none
Executes when user is typing in any search input.
`html`
Type: Function
Default: none
Executes after checkbox is checked.
`html`
Type: Function
Default: none
Executes after column sort. Each column except clicked one is reset to default sort direction.
`html`
Type: Function
Default: none
Executes after row expand.
`html`
Type: Array
Default: empty array
Array with all table headers cells.
`js`
cells: [
{
name: "ID",
column: "id",
search: false
},
{
name: "Name",
column: "name",
search: true
}
]
#### Options inside headings
##### name
Type: String
Default: empty string
Displayed name.
##### column
Type: String
Default: null
Column name inside "data" attribute.
##### search
Type: Boolean
Default: false
Experimental function. Shows search input in header.
##### sortable
Type: Boolean
Default: false
Allows user to click on header column. It emits event with information about clicked column and direction (ascending or not).
##### ascending
Type: Boolean
Default: true
Available when column is set to sortable. True means that sort is ascending, false means that sort is descending.
Type: Array
Default: empty array
Array with all table body data.
`js`
data: [
{
id: 1,
name: "MacOS"
},
{
id: 2,
name: "Linux"
},
{
id: 3,
name: "Windows"
}
]
Type: Boolean
Default: false
If set to true, first column will contain checkbox.
`html`
Type: Boolean
Default: false
If set to true, row may be expanded with expander slot.
`html`
{{ item }}
Type: Boolean
Default: true
If set to true, listable will handle table
responsiveness.
`html`
Hooks are handlers for each table row and each table cell. With hook it is possible to manipulate classes and styles of rows and cells in vue way.
Simple hook is to handle table cells, and rowHook is to handle table rows.
First argument of handler is always object with classes and styles applied to handled element.
Second argument is always row of currently operated data.
Third argument in simple hook is column name.
Why not refs? Refs causes update, so update for each row is slower than using handlers.
`html`
:data="items"
:hook="onHook"
:rowHook="onRowHook"
/>
`html`
No data
vue-listable` uses the MIT License (MIT). Please see the license file for more information.