@pbartkowicz/vuetable

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

Prop	Type	Default	Required	Description
headers	Array		Yes	Array with columns.
items	Array		Yes	Array with items.
loading	Boolean	false	No	Set loading statement.
rowTemplate	String		No	Set column width. Use % or px and spaces between values
rowClass	String		No	Set row class.
headerClass	String		No	Set header class.
rowIds	Boolean	false	No	Anable dynamic id's foreach row.
sortable	Boolean	false	No	Anable column sort ASC/DESC. Always will emmit @sort.
pagination	Boolean	false	No	Anable component build-in pagination.
perPage	Number	10	No	Set number of items to display.
paginationClass	String		No	Set pagination class.

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

Slot	Description
no-records	Slot if items array is empty.
back-to-first	Slot for back to first page button in build-in pagination.
prev	Slot for previous page button in build-in pagination.
next	Slot for next page button in build-in pagination.
go-to-last	Slot for go to last page button in build-in pagination.