@pbartkowicz/vuetable v1.0.0

Table of contents

• General
• Setup
• Usage
• Object options
• Props
• Slots

General

Vue table component

component is created with:

• Vue 2.6.10

Setup

install module locally with npm or yarn

npm i @pbartkowicz/vuetable

or

yarn add @pbartkowicz/vuetable

Usage

Import

import vuetable from '@pbartkowicz/vuetable'

Register in components section

components:{
    vuetable,
},

Define array with columns and array with items objects

data(){

    return{

        headers:[
            {
            label: 'Name',
            for: 'name'
            },
            {
            label: 'Surname',
            for: 'surname'
            },
            {
            label: 'Gender',
            for: 'gender'
            }
        ],

        people:[
            {
            name: 'John',
            surname: 'Doe',
            gender: 'male'
            },
            {
            name: 'Joanna',
            surname: 'Doe',
            gender: 'female'
            }
        ],

    }

}

In object in headers you have to define two keys:

• label - this is property to name column
• for - For what key in people array is this column

<vuetable :headers="headers" :items="people" />

You can always use rowTemplate prop to set width foreach column.

<vuetable :headers="headers" :items="people" rowTemplate="33.3% 33.3% 33.3%"/>

Props

Slots

You can access to slot foreach column

<template v-slot:[forKeyFromHeaders]="{item}">

Example:

<vuetable :headers="headers" :items="people" rowTemplate="33.3% 33.3% 33.3%">
    <template v-slot:name="{item}">
        {{item.name}}
    </template>
</vuetable>

And foreach header

<template v-slot:HEADER_[forKeyFromHeaders]="{item}">

Example:

<vuetable :headers="headers" :items="people" rowTemplate="33.3% 33.3% 33.3%">
    <template v-slot:HEADER_name="{item}">
        {{item.name}}
    </template>
</vuetable>

Static slots