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