JD-Table

An advanced and flexible Vue.js 2.x component for displaying data tables. Feature rich and capable of handing big data, JD-Table was designed to integrate into applications with various needs.

View Demos

Table of Contents

• Features
• Install
  • NPM
  • Manual
• Usage
  • Initialize
    • SFC
    • Global
    • Script
  • Configure Options
  • Display Data
• Properties
• Browser Support
• Polyfill
• Documentation
  • Options
  • Data
  • Status
  • Events
    • From Table
    • From App
  • Listeners
  • Theming

---

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!

Back to Table of Contents

---

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

1. Clone this repository or download and save these files to your project:

   • ./dist/jd-table.min.js
   • ./dist/jd-table.min.css

2. Instructions for manually installing Font Awesome (Free) can be found here: https://fontawesome.com/start

Back to Table of Contents

---

Usage

Follow all 3 steps below to begin using JD-Table.

1. Initialize
2. Configure Options
3. Display Data

Initialize

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

SFC

The following is an example of how to use JD-Tables in a Vue SFC (single file component).

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

Global

The following registers JD-Table as a global component. Once registered, you can use the instructions above (SFC) to use and apply the component without having to import it each time.

import Vue     from 'vue';
import JDTable from 'vue-jd-table';

import "@fortawesome/fontawesome-free/css/all.min.css";
import 'vue-jd-table/dist/jd-table.min.css';

Vue.component( 'jdtable',JDTable );

new Vue
({
    ...
}).$mount( '#app' );

Script

The following shows an example of how to use JD-Table 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>

Configure Options

Dedicated Page - Click Here

Display Data

Dedicated Page - Click Here

Back to Table of Contents

---

Properties

JD-Table accepts the following props/properties:

• option [Object]
  • An object containing key/value pairs representing the options/settings for the table. Check out the options to learn more about the available choices.
• loader [Boolean]
  • A true/false setting which will enable or disable a loading message in the JD-Table. Use this while waiting to get a response from a REST call for data.
• event-from-app [Object]
  • An object containing two keys “name” (string) and “payload” (string/object). Use this to send events to JD-Table such as sending data. Learn more about how to send events and what is available here.
• event-from-app-trigger [Boolean]
  • A true/false setting which tells JD-Table to execute a event-from-app event. Learn more about triggering events here.
• event-from-jd-table [Event/Function/Callback]
  • A event that that is triggered using a Vue $emit call. Learn more about how to process these events here.

Back to Table of Contents

---

Browser Support

JD-Table runs in all modern browsers. IE11 is supported so long as a polyfill is provided. See the polyfill section for more details.

Back to Table of Contents

---

Polyfill

JD-Table is written with ES5/6 functionality. Take note that the build module for JDTable does not include a polyfill. If you need support for legacy browsers like IE 11 you will need to inject a polyfill service.

Reminder: Typically build processes like Webpack & Vue-CLI do NOT add polyfill’s to your imported dependencies (it will polyfill your app but not the JDTable dependency).

Polyfill Solution #1

For build processes like Webpack/Vue-CLI, rather then importing the component normally, import the .VUE file directly. If your project already includes polyfill’s it will be processed normally.

import JDTable from 'vue-jd-table/src/jd-table.vue';

Polyfill Solution #2

For Vue-CLI specifically, create/add the following to vue.config.js. This will tell Vue-CLI to polyfill the normally imported JD-Table module.

vue.config.js

module.exports =
{
    transpileDependencies : ['vue-jd-table']
};

Polyfill Solution #3

Using babel and babel-polyfill, directly add polyfill’s to your dependency’s.

babel.config.js

module.exports =
{
    presets:
    [
        ['env',
        {
            polyfills :
            [
                'es6.promise',
                'es6.object.assign',
                'es6.function.name',
                'es6.array.find',
                'es6.array.find-index',
                'es7.array.includes',
                'es6.string.includes'
            ]
        }]
    ]
}

Back to Table of Contents