Tueble

A Vuejs table component

Version: 1.6.0 Updated: 09/02/2020

By: marcosdefontes License: MIT

Downloads Last 30 Days: 16

Install

npm i tueble
yarn add tueble

Repository: https://github.com/marcosdefontes/tueble

CDNs

bundle.run: https://bundle.run/tueble

jsDelivr: https://cdn.jsdelivr.net/npm/tueble

unpkg: https://unpkg.com/tueble

Tueble - A Vuejs table component

npm version

Work in progress!

Properties

Tueble (Root Table Component)

Property Required? Default Value Description
data Yes -- Data that will be used to render the table
default-sort-by No -- Initial order of the table
default-sort-order No asc Initial sort order. asc for ascending and desc for descending
table-class No -- Classes that will be added to the table
table-body-class No -- Classes that will be added to the table body (tbody)
filter-text No -- Term used to filter the table. Applies only to columns with the filterable property enabled
filter-min-size No 2 Minimal length of the filter search field to filter the table
filter-min-size No 2 Minimal length of the filter search field to filter the table
no-data-text No "No results found" Text to show when the filtered dataset is empty

Column Component

Property Required? Default Value Description
show No -- Sets which object's property to display. Must be provided if index prop is false
sortable No true Sets the column as sortable
filterable No true If true, the search text will be compared to the column contents
label Yes -- Sets the text of the column header
index No false If true column will show row number
column-class No -- Classes that will be added to column
column-header-class No -- Classes that will be added to column header
highlight No false If true finds specified terms in your input text and adds HTML tag around them. Does not apply when using custom slots

Filter By Domain Component

Property Required? Default Value Description
filter-by Yes Array Set of elements to be checked in the column provided
filter-column Yes String Name of the column to be searched for
Categories: Vue js