A simple datatable component for Vue js

It is a simple datatable,using bulma and axios under the hood.

features

pagination

filter

custom column rendering

installation

npm repo

npm i ex-vue-datatable

API

Import the component

import Datatable from "ex-vue-datatable" Vue.use(Datatable)

use

<vue-datatable :blueprint="blueprint"></vue-datatable>

Note that the component takes a blueprint object.the bluetprint object is our configuration.

request

The blueprint takes a request object as property.the request object contains method,url,paginate,per_page,pagination_key,options as its properties

1. method : 'get',this package uses axios,technically its possible to use any http verb used by axios.but as its an datatable,you'll always be using get
2. url : this is where the datatable will fetch data.the source.It sends an http request using axios.
3. paginate : It is a boolean,whether to paginate or not.
4. per_page : takes an integer,how many items do you wish to show in a single page. only applicable if chosen paginate:true
5. options : If you are using pagination,there will be dropdown list of numbers,that will decide how many items to show.This takes an array of integers.like options: [5,10,15] .only applicable if chosen paginate:true

Example

const blueprint = {
    request :{
        method: 'get',
        url: `http://localhost:8001/api/v2/vendor/products`,
        paginate: true,
        per_page: 5,
        pagination_key: 'per_page',
        options: [5,10,25,50]
    },
}

source

This is a direct (first level) property of the blueprint object .It is a string. It maps the response data (got from hitting the request.url endpoint).For example, maybe your response is something similar to

    {
        'someKey': {
            'someData': {
                'listOfData' : [
                    {   
                        //singleItemData
                    }
                    //array of object
                ]
            }
        }
    }

then your source should be source:'someKey.someData.listOfData'

meta

meta is a property of the blueprint object.At the moment,it allows only two properties.allow_search and allow_filter. more info on these below. example:

    const blueprint = {
        meta : {
            allow_search : true,
            allow_filter : false,
        }
    }

search

search is a property of the blueprint object. It allows only two properties.placeholder and search_key. The search_key is the string which will be used in the query string to send a get request . Maybe you are showing a users list and want to search by their username,it would be

    const blueprint = {
        search : {
            search_key : 'username'
        }
    }

And the request will be

http://url.com/data/source?username=jhon_doe

headers

headers is a direct property of the blueprint object.it takes an array.These are the table's headers. example

const blueprint = {
    headers: ['Id','Image','Product','Price','On Sale','Stock','Sold','Halal','Status','Action'],
}

columnMap

columnMap is an array of objects and a must have attribute of the blueprint object.This is where we map our columns.The columns will be ordered according the column map's serial.It will ignore the order in the headers array.

columnMap takes on two properties,name and render. name will be the name of your property in the data source.Suppose you have a name and featured_image in your response's specified data source (source:'someKey.someData.listOfData').So the names of these two columns would be

    columnMap : [
            {
                name : 'name',
            },
            {
                name : 'featured_image',
            },
        ]

header's columns are just for display,columnMap actually picks the data to show This will show the name and featured image.But will not display the image as image,but the path/data provided by the server.

columnMap.render

render is a function,where you can write html,add any valid javascript logic to render your column.the render function will get the current traversing row as its parameter. So how to show the image,and product's name.Lets assume,we have name,featured_image and slug in the records (data source).And we want the name to be hyper link,and the image to show as an image.Also we want an action button for our Actions column So for that,the api will be

    const blueprint = {
        columnMap : [
                {
                    name: 'featured_image',
                    render: function(data) {
                    return `<figure class="image is-32x32">
                                <img class='is-rounded' src="${data.featured_image}">
                           </figure>`
                    }
                },
                {
                    name : 'name',
                    render: function(data) {
                    return `<a class='product-name' href='/product/${data.slug'>${data.name}</a>`
                    }
                },
                {
                    name:'action',
                    render: function() {
                        return `<button class='button is-rounded is-small'>View</button>`
                    }
                },
            ]
    }

the output should be

This is code for the image show at the top

 const blueprint = {
        source: 'data.data',
        headers: ['Id','Image','Product','Price','On Sale','Stock','Sold','Halal','Status','Action'],
        meta: {
            allow_search : true,
            allow_filter : true,
        },
        request :{
            method :'get',
            url : `http://localhost:8001/api/v2/vendor/products`,
            paginate:true,
            per_page: 5,
            pagination_key: 'per_page',
            options :[5,10,25,50]
        },
        search: {
            placeholder : 'product name, ex: Apple Iphone 10',
            search_key : 'search',
        },
        columnMap : [
            {
                name : 'id',
                render: function(data) {
                    return '#' + data.id
                }
            },
            {
                name: 'featured_image',
                render: function(data) {
                    return `<figure class="image is-32x32">
                                <img class='is-rounded' src="${data.public_featured_image}">
                            </figure>`
                }
            },
            {
                name : 'name',
                render: function(data) {
                    return `<a class='product-name' href='/product/${data.slug}'>${data.name}</a>`
                }
            },
            {
                name : 'price',
                render: function(data) {
                    return '$' + Number(data.original_price).toFixed(2)
                }
            },
            {
                name : 'on_sale_price',
                render: function(data) {
                    if(data.on_sale) {
                        return '$' + Number(data.on_sale_price).toFixed(2)
                    }

                    return 'N/A'
                }
            },
            {
                name:'stock',
            },
            {
                name: 'sold'
            },
            {
                name: 'halal',
                render: function(data) {
                    if(data.is_halal) {
                        return `<span class="tag is-info">Halal</span>`
                    }

                    return `<span class="tag is-danger">Haram</span>`
                }
            },
            {
                name: 'status',
                render: function(data) {
                    if(data.status == 'approved') {
                        return `<span class="tag is-primary"><abbr title="Approved">Appr</abbr></span>`
                    }
                    return `<span class="tag is-danger"><abbr title="Pending">Pen</abbr></span>`
                }
            },

            {
                name:'action',
                render: function() {
                    return `<button class='button is-rounded is-small'>View</button>`
                }
            },
        ]
    }

I was working on a laravel project when i needed this,some of the api might seem laravel centric

More to come :)