tavuelo v0.12.14

tavuelo

Easy to use but with advanced features a Vue.js table component

Installation

First, install npm package:

npm i --save tavuelo

Demo

Clone this repository to your local hard drive.

Install all dependencies:

npm i

Run the demo:

npm run serve

Enter http://localhost:8080 in your browser and check the example of Tavuelo functionalities. Demo code can be found at /src/App.vue file.

Usage

Global usage:

// main.js file
import tavuelo from 'tavuelo'

Vue.use(tavuelo)

Local usage:

// in your Vue.js component
import Tavuelo from 'tavuelo'

export default {
  name: 'YourComponent',
  components: {
    Tavuelo
  }
}

Template usage example:

Minimal example:

<template>
  <tavuelo
    :columns='tableColumns'
    :data='tableData'
  ></tavuelo>
</template>

Extended example:

<template>
<tavuelo
  :columns='[
    { title: "First name", dataSource: "first_name", minWidth: "250px" },
    { title: "Last name", dataSource: "last_name", width: "150px" },
    { title: "Age", dataSource: "age", width: "60px" },
    { title: "Location", dataSource: "location" },
    { title: "Active", dataSource: "active", type: "bool", tooltip: "Information if user is active", width: "80px" },
    { title: 'Full name', dataSource: 'fullName', type: 'slot', slotName: 'fullName', computedValue: row => `${row.first_name} ${row.last_name}` },
    { title: 'Login', dataSource: 'login', type: 'slot', slotName: 'login', computedValue: row => `${row.first_name}${row.age}${row.last_name}` }
  ]"
  :data='[
    {"first_name":"Anthony","last_name":"Levine","age":52,"location":"Lamorteau","active":0,"joined":"1993-11-25T16:42:12-08:00","email":"Sed.nec@eleifendvitae.edu","phone":346593579},
    {"first_name":"Warren","last_name":"Mcintyre","age":61,"location":"Zwevegem","active":1,"joined":"2013-02-07T05:05:17-08:00","email":"ante.lectus.convallis@pharetrased.ca","phone":349017516}
  ]'
  :customSortRules='{
    fullName: (dataCopy, direction) => {
      dataCopy.sort((a, b) => String(`${a.first_name} ${a.last_name}`).localeCompare(String(`${b.first_name} ${b.last_name}`)));
      if (direction === 'desc') {
        dataCopy.reverse();
      }
      return dataCopy;
    },
  }'
  :perPage='20'
  :hasSearch='true'
  :searchColumns='["first_name", "last_name", "location", "age"]'
  :searchCaseSensitive='true'
  :useFlex='true'
  :wrapContent='true'
  defaultSortDataName='first_name'
  :clickHeaderToSort='true'
  :downloadDataButton='true'
  :useNoDataSlot='true'
  :sortColumns='["first_name", "last_name", "location", "age", "fullName", "login"]'
  @page-update="data => this.currentPage = data"
>
  <template slot='noDataSlot'>There is no data here!</template>
  <template slot='fullName' slot-scope='{entry}'>
    {{ entry.first_name }} {{ entry.last_name }}
  </template>
  <template slot='login' slot-scope='{entry}'>
    {{entry.first_name}}{{entry.age}}{{entry.last_name}}
  </template>
</tavuelo>
</template>

API

Table component

Component props

Component events

Table column definition

To create table properly you have to pass an array of columns definitions to :columns component property, e.g.:

[
  {title: 'First name', dataSource: 'first_name'},
  {title: 'Last name', dataSource: 'last_name'},
  {title: 'Active', dataSource: 'is_active', type: 'bool'}, // type 'text' is default
  { title: 'Full name', dataSource: 'fullName', type: 'slot', slotName: 'fullName', computedValue: row => `${row.first_name} ${row.last_name}` }
]

Roadmap

Roadmap to version 1.0.0. is available at issues tab.

Feel free to add own feature request issues there.

Changelog

You can find the release notes/changelog at lukaszkups website

Troubleshoot & support

You can submit bugs similarly to feature request at github's issues tab with bug label.

For more alike real-time support, feel free to tweet to me.

License

MIT

Author

@lukaszkups