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!
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"> <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> 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.
|
See live demo and download source code.
This awesome script developed by vue-jd-table, Visit their official github repository for more information and follow for future updates.
