coins-vue-data-table v1.1.0
coins-vue-data-table
A Vue.js data table component
Properties
name
( type ) default
data-source
(string | array) required
If data-source
is a string, a GET
request will be made to that URL. Otherwise, if data-source
is an array, that will be used as the table data.
columns
(array) required
An array of the table columns an their parameters. Possible values:
name
Name displayed on tabledata
(string) Key referenced in datadata
(function) A function determines column render. It is passed the data row.type
There are two options here:- 'numeric'. This facilitates accurate sorting. By default sorting uses String's
localeCompare
function. - 'button' A button object with possible title, class and click properties
- 'numeric'. This facilitates accurate sorting. By default sorting uses String's
visible
Whether or not a column should be initially visible
Note: By default boolean table values are converted to Yes/No for true
/false
respectively. This behavior can be overwritten with the function data
data type.
checkboxes
(boolean) false
When enabled, the first column of the table will contain checkbox inputs.
Pagination
rowsPerPage
(integer) 20
Number of rows to display
visiblePageRange
(integer) 6
Number of pages to be visible in the page selector
skipRange
(integer) 5
How far the >>
and <<
buttons should skip
Table Controls
exportButton
(boolean) true
Whether or not the export button should be visible
columnsButton
( boolean ) true
Whether or not the column selector button should be visible
filter
( boolean ) true
Whether or not the filter should be visible
buttons
( array )
An Array of button objects that will be listed next to the other table buttons. The format for the buttons is as follows:
{
title: 'Title displayed on button',
click: (checked rows or all rows if checkboxes are disabled) => { ... }
}