Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-jd-table
Advanced tools
Readme
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.
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.
Clone this repository or download and save these files to your project:
Instructions for manually installing Font Awesome (Free) can be found here: https://fontawesome.com/start
Follow all 3 steps below to begin using JD-Table.
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.
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 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' );
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>
JD-Table accepts the following props/properties:
JD-Table runs in all modern browsers. IE11 is supported so long as a polyfill is provided. See the polyfill section for more details.
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).
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';
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']
};
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'
]
}]
]
}
FAQs
A VueJS v2.X component for displaying data in a table.
The npm package vue-jd-table receives a total of 21 weekly downloads. As such, vue-jd-table popularity was classified as not popular.
We found that vue-jd-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.