vue data-table
Smart table using vue.js - sorting columns, filter by string, child rows, customs columns, custom row data
Demo:
https://jsfiddle.net/mikemenaker/zuyvwvms/
Installation
With npm:
npm i v-data-table --save
With a CDN:
<!-- In <head> --><!-- In <body>, after Vue import -->
Usage
With an ES6 bundler (via npm)
In your index file
Vue
With a CDN
Props:
- data
- Array
- Data to create table from
- Needs to be object based (no primitives like strings, numerical, boolean)
- Array change detection needs to adhere to: https://vuejs.org/v2/guide/list.html#Array-Change-Detection
- columnsToDisplay
- Array
- Which columns to display in table
- columnsToNotDisplay
- Array
- Which columns to not display in table (cannot be used with columnsToDisplay)
- aggregateColumns
- Boolean
- Walk all objects instead of just first object to get list of columns (cannot be used with columnsToDisplay)
- displayNames
- Object
- Mapping of column name -> display name
- filterKey
- String
- Filter data for string
- childHideable
- Boolean
- Are child rows hideable (double click open/close)
- childInitHide
- Boolean
- If child rows are expandable, should they be hidden initially
- columnsToSort
- Array
- What columns should be sortable (columnsToNotSort will take precedence if both are provided)
- columnsToNotSort
- Array
- What columns should not be sortable
- childTransitionClass
- String
- CSS class to use in transition
- itemsPerPage
- Numbers
- Enables pagination
Slots:
- caption
- Any caption that should be inserted before the header
- child
- Any sub row of child detail data
- column
- Any template for a column
- nodata
- Slot to display if the data provided is empty
Styling:
- Selected columns have the class "active"
- Arrows are a span with class "arrow"
- Ascending/descending arrows also have class "asc"/"dsc"
or with Font Awesome
-For pagination next page/previous page spans will have class "nextPage"/"previousPage"
Examples
Basic table:
var demo = el: '#demo' data: gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Only display certain columns:
var demo = el: '#demo' data: gridColumns: 'name' 'power' gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Bind to search string:
Search
var demo = el: '#demo' data: searchQuery: '' gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Map display names of columns:
var demo = el: '#demo' data: displayNames: 'power': 'Super Powers' gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Add a caption:
This is my caption
var demo = el: '#demo' data: gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Use template for a column (template name must match column name):
{{props.entry.name}} Show Power
var demo = el: '#demo' data: gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000 methods: { ; }
Add a child row, each section will be a tbody of 2 rows (data row, child row):
This is my child row: {{props.entry.name}}
var demo = el: '#demo' data: gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Add ability to toggle child row (double click to open/close):
This is my child row: {{props.entry.name}}
var demo = el: '#demo' data: gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000
Add ability to toggle child row (double click main row to open, double click child to close) and default to children rows closed:
This is my child row: {{props.entry.name}}
var demo = el: '#demo' data: gridData: name: 'Chuck Norris' power: Infinity name: 'Bruce Lee' power: 9000 name: 'Jackie Chan' power: 7000 name: 'Jet Li' power: 8000