A data table component for the Vue Stacks Ecosystem
: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 [email protected] 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