Skip to content
A simple Vue.js table component
Vue JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
public
src
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
LICENSE
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js
vue.config.js

README.md

tavuelo

A simple Vue.js table component

Installation

First, install npm package:

npm i --save tavuelo

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" },
  ]"
  :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}
  ]'
  :perPage='20'
  :hasSearch='true'
  :searchColumns='["first_name", "last_name", "location", "age"]'
  :searchCaseSensitive='true'
  :useFlex='true'
  :wrapContent='true'
  defaultSortDataName='first_name'
  :clickHeaderToSort='true'
></tavuelo>
</template>

API

Table component

Component's prop Default value Value examples Description
columns [] [{title: 'First name', dataSource: 'first_name'}, {title: 'Last name', dataSource: 'last_name'}] An array of objects that represents table columns
data [] [{id: 1, first_name: 'Lukasz', last_name: 'Kups'}, {id: 2, first_name: 'Joe', last_name: 'Doe'}] An array of objects that represents table contents data
perPage 0 20 A number that defines how many items should be displayed on each pagination when pagination is enabled (0 disables pagination
hasSearch false true A boolean value which sets if table should have search functionality (it will display a search input above the table
customFiltering n/a (data, searchQuery) => {...} A function that is executed instead of default filtering while search. It takes two parameters: copy of table's data (array) and string that is the search input value
searchColumns [] `['first_name, 'last_name', 'location'] `
searchCaseSensitive false true A boolean value to set if search string should be case sensitive or not
useFlex true false A boolean value to set if table columns should behave like flex elements (e.g. columns won't resize on page change)
wrapContent false true A boolean value that adds ellipsis effect to each table cell if content overflows max column width
defaultSortDataName '' 'first_name' A string value that points on column's data source that should be default sorting based on
defaultSortDirection 'asc' 'desc' A string asc or desc that set the default sort direction
customSortRules n/a {first_name: (dataCopy, sortDirection) => {...}} An object that keys corresponds to column data sources and values are functions that handle custom sort logic while taking 2 parameters: dataCopy which is exact copy of table's data and sortDirection (which takes asc or desc as its value)
clickHeaderToSort false true A boolean value that binds column sorting with whole table header cell (by default, tavuelo handle sorting by clicking sort arrows only)
rowClick null rowclickCallback(row) { ... } A function that is executed when user clicks on any table body row. This function takes row parameter by default so you can learn on which row user clicked

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
]
Property name Available values Example value Description
title Any string First name Title of the column that will be displayed in table header
tooltip Any string First name of the user If defined, when user hover on table header cell, it will display additional content as tooltip bubble. Handy when table gets really wide and want to show shorter table headings with extensive descriptions inside tooltips.
dataSource Any string first_name Name of the property that should be displayed in the column.
type text(default), bool bool Defines type of the column contents. By default, text column data type is set. When bool, it displays tick (true) or cross(false) icon instead of plain value.
onClick Any function cellClickCallback(row, column, event) { ... } A function that is executed when user clicks on given table column cell. This function takes row, column and event parameters by default so you can use them in your callback.

Roadmap

Roadmap to version 1.0.0. is available at issues tab.

Feel free to add own feature request issues there.

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

You can’t perform that action at this time.