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.
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