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": "[email protected]",
                    "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": "[email protected]",
                    "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": "[email protected]",
                    "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": "[email protected]",
                    "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 | Input[text])

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"
    }
}]