Vuejs-Vue jd table 1.0.2: vue-jd-table - Advanced and flexible data table component for Vue 2. Feature Rich: search, filtering, exporting, pagination (traditional and virtual scroll) and so much more!

icon
Latest Release: 1.0.2

This is the first official release of JD-Table.

Source code(tar.gz)
Source code(zip)

JD-Table

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.


Example of JD-Table

View Demos

Table of Contents


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

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]
    • An event 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 than 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

Comments

  • exposing named slots which allows enclosing template to customize eac…
    exposing named slots which allows enclosing template to customize eac…

    Nov 30, 2019

    …h field

    <template>
      <div>
        <jd-table
          :option                 = "tableOptions"
          :loader                 = "tableLoader"
          :event-from-app         = "eventFromApp"
          :event-from-app-trigger = "eventFromAppTrigger"
          @event-from-jd-table    = "processEventFromApp( $event )"
        >
          <template v-slot:account_id="p">
            <!-- example of exposed data -->
            {{ p.pageRowIndex }} - {{ p.rowIndex }} |
            {{p.value}}
          </template>
          <template v-slot:create_date="p">
            <!-- example of using Vue filter -->
            <span :title="p.value | localDate">{{p.value | localDateShort}}</span>
          </template>
          <template v-slot:first_name="p">
            <!-- example of plan Javascript -->
            <span :title="p.value">{{p.value ? p.value.toUpperCase() : p.value}}</span>
          </template>
        </jd-table>
        <iframe id="excelExportArea" style="display:none"></iframe>
      </div>
    </template>
    
    Reply
  • componentState.selectedItem is undefined
    componentState.selectedItem is undefined

    Jan 25, 2020

    Example: If I set 50 rows for page If I click on a row with Index between 0 and 49, the componentState.selectedItem is an object (correct). But If I change page and I click on a row >= 50 the componentState.selectedItem is undefined (but componentState.selectedIndex is correct).

    Reply
  • Fixed SelectedItem undefined
    Fixed SelectedItem undefined

    Jan 27, 2020

    Hi, I've fixed the problem. Example: If you have an array of 60 elements with page Limit 50, when you go to the second page you have a currentTableData with 10 elements and you try to retrieve element with index of all elements (selectedIndex = 57 --> error) selectedIndex must be = selectedIndex - (pageLimit * currentPage - 1).

    Reply
  • Set hasBeenSorted to be true when viewColumn.sort
    Set hasBeenSorted to be true when viewColumn.sort

    May 11, 2020

    Noticed that the sortDirection is not working on render and found this may fix the issue.

    Reply
  • is it possible to add html ?
    is it possible to add html ?

    Aug 10, 2021

    null

                                                                                                                                                                                                           
    Reply
  • your Table is awesome
    your Table is awesome

    Mar 28, 2020

    Hi my friend your jd-table in awesome but icant use with laravel api and i watch Display data but not work . if you had full example for get data from api please send to me. Thank you again

    Reply
  • Quick view pagination error across page boundary when dataProvider=0
    Quick view pagination error across page boundary when dataProvider=0

    Nov 30, 2019

    The Quick View pagination uses currentTableData as data source for rendering but uses processedDataSize for pagination. The processedDataSize can be greater than currentTableData.length which causes pagination error.

    Steps to reproduce:

    1. dataProvider=0 or unset
    2. set the page row size to small so the pagination can happen
    3. double click on any row to open Quick View
    4. attempt to navigate beyond the page will cause the error below

    A related error

    1. dataProvider=0 or unset
    2. set the page row size to small so the pagination can happen
    3. navigate to any page other then the first page
    4. double click to open Quick View will cause the error below also
    [Vue warn]: Error in render: "TypeError: t.currentTableData[t.row.selectedIndex] is undefined"
    
    found in
    
    ---> <JDTable>
           <AccountList>
             <AccountVue> at src/views/account.vue
               <App> at src/App.vue
                 <Root>
    
    Reply
  • Append row data rather than always replace
    Append row data rather than always replace

    Nov 8, 2019

    It would be great if there was a way to append data to the table without having it refresh the entire table, so that you don't have to lose your scroll position while adding new rows.

    Is there any way that this would be possible? I have a use case where I have sorting turned completely off, for example.

    Reply
  • bad export for utf-8
    bad export for utf-8

    Sep 28, 2019

    thanakyou for your good codes. I have a problem to export from vue jd table when export utf 8 it's not correct characters. Screenshot_12

    Reply
  • Changed property spelling
    Changed property spelling

    Aug 11, 2019

    Under -jd-reset.sup, "font-size" was throwing an error because it was spelled "ont-size." So, I just updated that part.

    Reply
  • Virtual scrolling with external data provider
    Virtual scrolling with external data provider

    Mar 16, 2020

    First off, great work with this component and all the advanced features out-of-the-box 👍

    The "only" thing I am missing is virtual scrolling support with an external data provider, and I can see it may? have been supported at one point, but removed via this commit: https://github.com/jamesdruhan/vue-jd-table/commit/69b3a93911734dadf760edf1cf007ba3d0cad0ff

    I am working on a project where it is required and I might consided making a fork of this project and try to implement it, but I thought I would ask you first if you would reconsider implementing it, or otherwise give some tips/pointers on how it should be done? 🙂

    Reply
  • customize via slot
    customize via slot

    Aug 27, 2019

    Hi, the component looks very good but does it support slots for tr/ td what ever? i checked the docs but cant find any about this.

    atm i use vue-good-table but i think about to switch

    in vue good-tabele i can do

    <template v-slot:table-row="{ column, row }">
         <span v-if="column.field == 'showMarket'">
           <RouteLink
             :label="$t('tables.markets.button')"
             :route="{ name: 'market-id', params: { id: row.id } }"
           />
         </span>
       </template>
    

    and does it support ssr? thanks

    Reply
  • Not working with nuxt!
    Not working with nuxt!

    Jul 2, 2021

    I just try to install it via npm it installs but not works Nuxt gives a error of component not defined vue I get deep into it, and I think

    THE IS THIS COMPONENT IS NOT ESLINT FRIENDLY

    btw, anyone how to use this vue-jd-table in nuxt?

    Reply
  • Array Data not supported
    Array Data not supported

    Jul 15, 2019

    JD-Table does not support data with an array of strings/numbers. If passed to JD-Table they are rendered as a javascript object.

    Reply
  • Don't work the option contextMenuRight
    Don't work the option contextMenuRight

    Nov 13, 2020

    I have this configuration:

    this.tableOptions =
                {
                    title: null,
                    columns: this.columns,
                    quickView: true,
                    contextMenu: true,
                    contextMenuRight: true,
                    contextMenuQuickView: true,
                    contextMenuEdit: true,
                    contextMenuDelete: true,
                    addNew: true
                };
    

    But I don't see the options? What is the problem?

    image

    Reply