Vue Stacks Ecosystem: vstx Data-Table

VueStacks: vstx-data-table

The VSTX Data Table is a data grid component for displaying, sorting, searching, filtering, and interacting with large and deeply nested data sets. The theme is based on the Bulma CSS framework. Support for other CSS frameworks like Bootstrap can be achieved using additional CSS. THe data table is part of the VueStacks modular framework wrapper which is soon to be a collection of components for Vue.js.

Live Demo www.vuestacks.com/data-table

Current Features

  • Deep (nested) Sorting, Filtering, and Searching by All/Column
  • Multi-Column Sorts with Sort By configuration
  • Works with large datasets (Tested with 25k rows of complex nested objects)
  • Customize Row/Column/Cell content using Vue.js Named & Scoped Slots
  • Customize Title, Description, Icons, Loading Animation, Errors, and more using Slots
  • Selectable rows with @onSelect event
  • Built-in Loading animation controlled through Prop
  • Client-side exports of data to CSV and Excel
  • Optional Column Totals by Page & All
  • Automatic Pagination with configurable page size
  • On-page configurations for Column Position, Sort Order, and much more
  • Configuration Prop input and Emits configuration change events to support configuration persistence
  • Built-in Filters for Outputting Money, Numbers, and Dates (including timezone support)
  • Support for Custom Filters with n parameters
  • Text Replacement for variable Links
  • Hidden Columns
  • Web Worker support for Filtering, Sorting, and Slicing data

Using vstx-data-table

Installation

npm install vstx-data-table

Usage

The below example will render a simple data-table with 3 columns. More complex examples are available at www.vuestacks.com/data-table

<template lang="pug">
  .sample-data-table
    data-table(
      :payload="data"
    )
</template>
<script>
import DataTable from 'vstx-data-table'

export default {
  name: 'SampleReport',
  components: {
    'data-table': DataTable
  },
  data () {
    return {
      data: [
        {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>

This project is licensed with a GNU GPLv3 License. By Jeremy R DeYoung and Daniel Berg.