vue-listable
Getting started
Vue-listable is an advanced data table plugin for vue.js.
Installation
Using NPM:
npm install vue-listable --save
Basic usage
Vue.js
Vue
Same for nuxt.js:
Nuxt.js
Create vue-listable.js in plugins directory:
Vue
Then in nuxt.config.js:
moduleexports = plugins: src: '~/plugins/vue-listable.js'
Component
Inside template use listable component:
Options
@search
Type: Function
Default: none
Executes when user is typing in any search input.
@checked
Type: Function
Default: none
Executes after checkbox is checked.
@sorted
Type: Function
Default: none
Executes after column sort. Each column except clicked one is reset to default sort direction.
@expanded
Type: Function
Default: none
Executes after row expand.
headings
Type: Array
Default: empty array
Array with all table headers cells.
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.
data
Type: Array
Default: empty array
Array with all table body data.
data: id: 1 name: "MacOS" id: 2 name: "Linux" id: 3 name: "Windows"
checkbox
Type: Boolean
Default: false
If set to true, first column will contain checkbox.
expandable
Type: Boolean
Default: false
If set to true, row may be expanded with expander slot.
{{ item }}
responsive
Type: Boolean
Default: true
If set to true, listable will handle table responsiveness.
Hooks
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.
Handle empty rows
No data
License
vue-listable
uses the MIT License (MIT). Please see the license file for more information.