1.9.0 • Published 5 years ago
vue-custom-table v1.9.0
vue-custom-table
Getting Started
Prerequisites
The plugin is meant to be used with existing Vue 2.x projects. It uses ES6 features so as long as your build process includes a transpiler, you're good to go.
Installing
Install with npm:
npm install --save vue-custom-table
import into project:
import Vue from 'vue';
import VueCustomTable from 'vue-custom-table';
Vue.use(VueCustomTable);
Example Usage
<template>
<div class="hello">
<VueCustomTable :headers="headers" :data="data" />
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
data: [{
"id": 1,
"name": "Cinderella",
"surname": "Varney",
"email": "cvarney0@ucoz.ru",
"userImage": "https://www.freeiconspng.com/uploads/user-icon-png-person-user-profile-icon-20.png",
"countries": ["DE", "AL", "KS", "UK"]
}, {
"id": 2,
"name": "Sheridan",
"surname": "Delacroux",
"email": "sdelacroux1@cmu.edu",
"userImage": "https://www.freeiconspng.com/uploads/user-icon-png-person-user-profile-icon-20.png",
"countries": ["DE", "AL", "KS", "UK"]
}, {
"id": 3,
"name": "Umeko",
"surname": "Dobrowlski",
"email": "udobrowlski2@ustream.tv",
"userImage": "https://www.freeiconspng.com/uploads/user-icon-png-person-user-profile-icon-20.png",
"countries": ["DE", "AL", "KS", "UK"]
}, {
"id": 4,
"name": "Lainey",
"surname": "Llewhellin",
"email": "lllewhellin3@cdc.gov",
"userImage": "https://www.freeiconspng.com/uploads/user-icon-png-person-user-profile-icon-20.png",
"countries": ["DE", "AL", "KS", "UK"]
}],
headers: [{
"key": "name",
"label": "Name",
}, {
"key": "surname",
"label": "Surname",
}, {
"key": "email",
"label": "Email",
}],
};
},
}
</script>
Note: By changing the order of the elements in the headers array, will be changed also order of the columns reflectively.
Table cell options
This is declared on the headers array. There are several types of cells. To use the default one can be achieved by not including at all attribute : customCell in the header object.
Default cell
headers: [{
"key": "name",
"label": "Name",
}]
Button(s) cell
headers: [{
"key": "action",
"label": "Action",
"customCell": "ButtonCell",
"customData": [{
"caption": "Edit",
"action": (item) => this.editTableRow(item)
}]
}]
JsonTree cell
First run the following command
npm install --save vue-json-tree-view
Include it on your main.js and register
import TreeView from 'vue-json-tree-view'
Vue.use(TreeView);
Continue using it as the following structure
import CountriesList from './countries.json';
headers: [{
key: 'countries',
label: 'Countries',
"customCell": "JsonTreeCell",
"customData": CountriesList
}]
Link(s) cell
headers: [{
key: 'networks',
label: 'Networks',
"customCell": "LinkCell",
"customData": [{
"caption": "Facebook",
"target": "https://www.facebook.com/"
}, {
"caption": "Linkedin",
"target": "https://www.linkedin.com/"
}]
}]
Checkbox cell
headers: [{
key: 'skills',
label: 'Skills',
"customCell": "CheckboxCell",
"customData": {
"options": ["HTML", "CSS", "JS", "PHP", "JAVA", "PYTHON"],
"action": (item, chosenValue) => this.registerChosenValue(item,chosenValue)
}
}]
Radio cell
headers: [{
key: 'nativeLanguage',
label: 'Native Language',
"customCell": "RadioCell",
"customData": {
"options": ["English", "Albanian", "Italian", "German", "Chinese", "Spanish"],
"action": (item, pickedValue) => this.registerChosenValue(item,pickedValue)
}
}]
Image cell
For custom style, please set it in the customStyle object inside customData. Otherwise will be a max-width of 200px for every image.
headers: [{
key: 'userImage',
label: 'User',
"customCell": "ImageCell",
"customData": {
"customStyle" : {
width: "100px"
},
"imageKey": "userImage"
}
}]
Input cell (Textarea | Inputtext)
headers: [{
key: 'jobTitle',
label: 'Job Title',
"customCell": "InputCell",
"customData": {
"type": "text",
"placeholder": "Job Title",
"value": "",
"modelReference": "jobTitle" //This refers to one of the keys on data json
}
}, {
key: 'jobTitle',
label: 'Job Title',
"customCell": "InputCell",
"customData": {
"type": "textarea",
"placeholder": "Job Title",
"value": "",
"modelReference": "jobTitle" //This refers to one of the keys on data json
}
}]
List cell (From data or static array)
let countries = ["DE", "AL", "KS"]
headers: [{
key: 'countries',
label: 'Countries',
"customCell": "ListCell",
"customData": {
"modelReference": "countries"
}
}, {
key: 'countries',
label: 'Countries',
"customCell": "ListCell",
"customData": {
"external": true,
"externalData": countries
}
}]
Icon cell
First run the following command
npm install --save vue-awesome
Include it on your main.js and register
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.component('v-icon', Icon);
Continue using it as the following structure
headers: [{
key: 'userIcon',
label: 'User Icon',
"customCell": "IconCell",
"customData": {
"iconName": "user"
}
}]