Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vstx-data-table
Advanced tools
Readme
:construction: VSTX Data Table is under active development building towards a 1.0 production ready release.
The VSTX Data Table is a powerful data grid component plugin (Vue.js 2.4+) for displaying, sorting, searching, filtering, and interacting with large and deeply nested data sets. As simple as passing a Prop containing an array of objects, as complex you need it to be.
Theme (Look & Feel): We rely on the Bulma (https://bulma.io/) CSS framework and FontAwesome icons for themeing. These are needed for the component to display properly. Support for other CSS frameworks like Bootstrap can be achieved using additional CSS. Other icon sets can currently be used by overriding the icons with named slots.
We've build a fully axios enabled data-table example ready to install. Clone this project locally and run
npm install
in the./examples/
directory And to view the live project, runnpm run serve
to see the fully working version.
A live demo can be found at www.vuestacks.com/data-table. This is still a work in progress and over the next few months we plan on adding dozens of features such as Data-fetching, caching, user preference persistence, data-table report collections, live data editing and much more!
npm install --save vstx-data-table
We use pug & stylus in all of our code and examples. Please make adjustments if you wish you get the example below to work without installing support for pug or stylus. The example below will render a simple data-table with 3 columns, a custom title via slot, and for 2/3 columns a customized presentation of header and cell content via slots. More complex examples are available at www.vuestacks.com/data-table
<template lang="pug">
#app
.sample-data-table.container
vstx-data-table(
:payload="payload"
:configuration="configuration"
)
//- SLOT: Table Title
template(slot="slot-title")
div
h1.title.has-text-link Data Table Example
//- SLOTS: Title Column
template(slot="title-header", slot-scope="table")
span.has-text-danger Titles
template(slot="title", slot-scope="table")
span.has-text-success {{ table.item.title }}
//- SLOTS: Amount
template(slot="amount-header", slot-scope="table")
span.has-text-warning $
template(slot="amount", slot-scope="table")
em.has-text-info ${{ table.item.amount.toFixed(2) }}
custom
</template>
<script>
<!-- Import Bulma for Base Styling -->
import 'bulma/css/bulma.css'
<!-- Import FontAwesome Icons -->
import Fontawesome from '@fortawesome/fontawesome'
import faSearch from '@fortawesome/fontawesome-free-solid/faSearch'
import faTable from '@fortawesome/fontawesome-free-solid/faTable'
import faColumns from '@fortawesome/fontawesome-free-solid/faColumns'
import faSort from '@fortawesome/fontawesome-free-solid/faSort'
import faFileExcel from '@fortawesome/fontawesome-free-solid/faFileExcel'
import faTimes from '@fortawesome/fontawesome-free-solid/faTimes'
import faList from '@fortawesome/fontawesome-free-solid/faList'
import faWrench from '@fortawesome/fontawesome-free-solid/faWrench'
import faAngleLeft from '@fortawesome/fontawesome-free-solid/faAngleLeft'
import faAngleRight from '@fortawesome/fontawesome-free-solid/faAngleRight'
Fontawesome.library.add(faSearch)
Fontawesome.library.add(faTable)
Fontawesome.library.add(faColumns)
Fontawesome.library.add(faSort)
Fontawesome.library.add(faFileExcel)
Fontawesome.library.add(faTimes)
Fontawesome.library.add(faList)
Fontawesome.library.add(faWrench)
Fontawesome.library.add(faAngleLeft)
Fontawesome.library.add(faAngleRight)
<!-- Import Vue and the DataTable, Install -->
import Vue from 'vue'
import VstxDataTable from 'vstx-data-table'
Vue.use(VstxDataTable)
export default {
name: 'app',
data () {
return {
configuration: {
table: {
fullwidth: true
}
},
payload: [
{id: 1, title: 'row1', amount: 1},
{id: 2, title: 'row2', amount: 2},
{id: 3, title: 'row3', amount: 3},
{id: 4, title: 'row4', amount: 4}
]
}
}
}
</script>
<style lang="stylus">
</style>
cd /examples
.npm install
npm run serve
localhost:8080
in your browsergit checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
You can also contribute, ask us questions, or suggest features by emailing us at dev@blackfisk.com We are actively changing this data-table in our operations daily so please help us improve its usability.
This data-table project was built to support a need Blackfisk.com had however we quickly realized it needed to be open-sourced to help the community. Jeremy R DeYoung initially built the foundation Daniel Berg is currently primary contributor to this project
All code provided within is licensed with a GNU GPLv3 License
FAQs
Data table component for the Vue Stacks Template
The npm package vstx-data-table receives a total of 180 weekly downloads. As such, vstx-data-table popularity was classified as not popular.
We found that vstx-data-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
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.