Press "Enter" to skip to content

Advanced and Flexible Vue.js Component for Displaying Data Tables

JD-Table is an advanced and flexible Vue.js 2.x component for displaying spreadsheets. Feature-rich and capable of handling big data, the JD-Table is designed to integrate with applications with different needs.

vuejs datatable example, vue data table component, vuejs datatable example, vue 3 datatable, vue good table, vue data grid, vue grid 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!

How to make use of it:

Install

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

Usage

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

advanced data table, JD-Table Plugin/Github


See Demo And Download

Official Website(jamesdruhan): Click Here

This superior jQuery/javascript plugin is developed by jamesdruhan. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.