Here is following steps to implement an advanced and flexible Vue.js 2.x component for displaying data tables
Feature rich and capable of handling big data, JD-Table was designed to integrate into applications with various needs

Features
- Supports internal/external (API) data
- Traditional pagination
- Virtual scroll pagination
- Responsive/Fixed table sizing
- Responsive/Fixed column sizing
- Full-text search
- Column filtering
- Column selection
- Column views
- Column sorting
- Column resizing
- Left/Right click context menus
- Excel exportation
- Full screen/minimize
- Row ‘Quick View’
- … and more!
Install
NPM
npm install --save-dev vue-jd-table npm install --save-dev @fortawesome/fontawesome-free
Font Awesome (Free) is required for JD-Table. Failing to install this will result in missing icons.
Manual
- Clone this repository or download and save these files to your project
- ./dist/jd-table.min.js
- ./dist/jd-table.min.css
Initialize
nitializing includes 4 parts: Template, Vue Component, Options/Props and Theme. Below are a number of different ways to initialize JD-Tables depending on your needs.
<template> <div id="app"> <!-- JD-TABLE REQUIRED - TEMPLATE --> <JDTable :option = "tableOptions" :loader = "tableLoader" :event-from-app = "eventFromApp" :event-from-app-trigger = "eventFromAppTrigger" @event-from-jd-table = "processEventFromApp( $event )" /> <!-- JD-TABLE REQUIRED - EXCEL EXPORT --> <iframe id="excelExportArea" style="display:none"></iframe> </div> </template> <script> // JD-TABLE REQUIRED - COMPONENT REGISTRATION import "@fortawesome/fontawesome-free/css/all.min.css"; import JDTable from 'vue-jd-table'; export default { name : 'MyApp', // JD-TABLE REQUIRED - COMPONENT REGISTRATION components: { JDTable }, // JD-TABLE REQUIRED - OPTIONS/PROPS data () { return { tableOptions : { // ADD OPTIONS HERE }, eventFromApp : { name : null, data : null }, eventFromAppTrigger : false, tableLoader : false, columns : [ // ADD COLUMNS HERE ] } } } </script> <style lang="scss"> // JD-TABLE OPTIONAL - VARIABLE OVERRIDE // JD-TABLE REQUIRED - THEME @import "~vue-jd-table/dist/assets/jd-table.scss"; </style>
Script
The following shows an example of how to use JD-Table in your HTML files directly. You will require a polyfill for JD-Table.
<!-- Polyfill --> <script src="https://polyfill.io/v3/polyfill.js?features=es5,es6,es7&flags=gated"></script> <!-- VueJS --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- JD-Table Vue Component --> <script src="vue-jd-table/dist/jd-table.min.js"></script> <!-- JD-Table Styles --> <link rel="stylesheet" href="vue-jd-table/dist/jd-table.min.css"> <!-- Font Awesome (Free) --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <div id="app"> <JDTable :option = "tableOptions" :loader = "tableLoader" :event-from-app = "eventFromApp" :event-from-app-trigger = "eventFromAppTrigger" @event-from-jd-table = "processEventFromApp( $event )" /> <iframe id="excelExportArea" style="display:none"></iframe> </div> <script type="text/javascript"> new Vue ({ el : '#app', components: { JDTable }, data () { return { tableOptions : { // ADD OPTIONS HERE }, eventFromApp : { name : null, data : null }, eventFromAppTrigger : false, tableLoader : false, columns : [ // ADD COLUMNS HERE ] } }, ... }); </script>