vuikit-datatable

1.2.6 • Public • Published

VuiKit DataTable plugin

Build Status

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.2.6
    19
    • latest

Version History

Package Sidebar

Install

npm i vuikit-datatable

Homepage

devonray.net

Weekly Downloads

20

Version

1.2.6

License

none

Unpacked Size

116 kB

Total Files

18

Last publish

Collaborators

  • devonray95