Nitrogen Pumpkin Mulch

    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

    Install

    npm i vuikit-datatable

    Homepage

    devonray.net

    DownloadsWeekly Downloads

    32

    Version

    1.2.6

    License

    none

    Unpacked Size

    116 kB

    Total Files

    18

    Last publish

    Collaborators

    • devonray95