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. D-Table is a data table component for Vue.js. Feature-rich and capable of handing big data, JD-Table was designed to integrate into applications with various needs. It includes traditional pagination as well as virtual scroll style pagination. Search, filtering, maximize, excel export, views, column manipulation and more!

Example of JD-Table

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!

Installation

Install Plugin via NPM

npm install --save-dev vue-jd-table
npm install --save-dev @fortawesome/fontawesome-free

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>



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>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by vue-jd-table, Visit their official github repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.