README
VuiKit DataTable plugin
VuiKit DataTable plugin adds loads of custom functionality to uikit datatables
- Search & filtering
- Row actions with custom icons and handlers
New Features!
- string array field
- number and textinput fields available
- Ability to add multiple items to filters for single row
- added loader for loads of data being processed
- added default sorting option for table
- Ability to multi select rows
- Ability to make columns smaller
- Improved styling of actions column
- Added Select all button
Installation
Install via npm
$ npm i vuikit-datatable
import VuiKitDatatable from 'vuikit-datatable'
Vue.component('vk-datatable', VuiKitDatatable)
-- or --
import VuiKitDatatable from 'vuikit-datatable'
Vue.use(VuiKitDatatable)
or download and refrence the vuikit-datatables.min.js file in your html
Whats required to use this module:
Usage
<vk-datatable
:columns="columns"
:rows="data"
:per_page="5"
:actions="actions"
v-on:row_click="rowClick"
v-on:row_delete="rowDelete"
v-on:row_edit="rowEdit"
defaultSort="" // the default column to sort by
loadingPropData="" // boolean to show table loader
selectableRows="" // multiple rows can be selected
v-on:rowsSelected="" // callback for when a row is selected
>
</vk-datatable>
var App = new Vue({
el: '#app',
data: function(){
return {
// the columns and settings for each
columns: [
{
title: '', // The title of the column
field: '', // the field name in the data array\
hidden: true|false , // hide this field
search: true|false, // is field searchable
filter: true|false , // is filtererable
sortable: true|false, // field is sortable
type: '', // field type, see bellow for options
prefix:'', // text before the value in the cell
suffix: '' // text after the value in the cell
inputsettings: {} // takes values used for number and text input fields,
onchange: function (row) {}, // callback for input field value changes
smallField: true|false // if true will add uk-table-shrink to the column
},
],
// the data
data: [],
// define actions for row
actions: [
{title: 'Edit Post', event: 'edit', icon: 'pencil'}, // creates an row_edit event
{title: 'Delete Post', event: 'delete', icon: 'trash'}, // creates an row_delete event
],
}
},
methods: {
// handler for RowClick Event
rowClick: function(row){
},
// handler for custom row_delete event
rowDelete: function(item){
},
// handler for custom row_edit event
rowEdit: function(item){
}
}
})
Available types are
VALUE | Description |
---|---|
'' | Text only field |
'array_implode' | Imploded array of values comma seperated |
'date_diff' | uses moment differece for humans to return the difference between the given data and today |
'number' | numeric field used for sorting |
'boolean' | Turns a true or false value into a yes or no |
'image_url' | Shows a 30x30px thumbnail |
'string_array' | Outputs an array of strings with each value on a new line |
'textinput' | Shows a text input and calls a callback on value change. available settings (placeholder) |
'numberinput' | Shows a numer input and calls a callback on value change. available settings (placeholder, min, max) |
Todos
- Full documentation page
- Export CSV option
- Setup changelog
- Setup contributing data
- Ability to use multiple calls for data pagination
- Hide search if no items are searchable
License
MIT