Vue.JS 2 Advanced Datatable Component with example

Vue.JS 2 Advanced Datatable Component with example

In this post we will show you Vue.JS 2 Advanced Datatable Component, hear for Vue.JS 2 Advanced Datatable Component we will give you demo and example for implement.

Read More Demo Download

See the Pen Vue.JS 2 – Advanced Datatable Component by Andrew Courtice (@andrewcourtice) on CodePen.




Description for Vue.JS 2 Advanced Datatable Component:

A Vue.js data table component that features pagination, filtering, searching and much more.

How to use Vue.JS 2 Advanced Datatable Component

import Vue from 'vue';
import Table from './table.vue';

<template>
<vue-table
    api="http://127.0.0.1:80"
	v-bind:pageSize="pageSize"
	v-bind:refresh="refresh"
    v-on:clickTr="clickTrEvent"
    v-bind:columns="columns">
</vue-table>
</template>
<script>
export default {
    name: 'some-module',
    props: {
        api: {
            type: String,
            default: 'http://127.0.0.1:80/'
        }
    },
    data() {
        return {
            refresh: false,
            pageSize: 6,
            columns: [
                {
					name: 'ID',
                    field: 'id',
                    searchable: true,
                    sortable: true,                    
                    render: function(value, row) {
                        return '<code>custom column content: </code>' + value;
                    }
                }
            ]
        }
    },
    components: {
        'vue-talbe': Table
    },
    methods: {
        forceUpdate: function() {
            this.refresh = !this.refresh
        }
    },
    clickTrEvent: function(e, data) {
        // e = target click element
        // data = whole row data
        console.log(e, data);
    }
}
</script>

Hope this code and post will helped you for implement Vue.JS 2 Advanced Datatable Component. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org

Leave a Comment

Your email address will not be published. Required fields are marked *

6  +  3  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US