vue-table-for

Installation

Yarn:

yarn add vue-table-for

Npm:

npm install vue-table-for

CDN: UNPKG | jsDelivr

Usage

First you need to load vue-table-for somewhere in your app:

import Vue from 'vue'
import TableFor from 'vue-table-for'
Vue.use(TableFor)

DEMO

LIVE DEMO for examples.

Components

TableFor

Builds a table for a collection of records.

Only the data columns are required. Header columns will be automatically generated based on the data columns but can be overridden using slots.

<template>
  <table-for
    class="table table-bordered"
    :records="records"
  >
    <td name="first_name" />
    <td name="last_name" />
    <td name="email" />
  </table-for>
</template>

<script>
import Axios from 'axios'
export default {
  data() {
    return {
      records: []
    }
  },
  mounted() {
    axios
      .get(
        "https://raw.githubusercontent.com/hunterae/vue-table-for/master/examples/people.json"
      )
      .then(response => {
        this.records = response.data
      })
  }
}
</script>

More documentation coming soon

Coming Soon

• Tests
• More documentation and examples (including the TableFor API)
• Ability to specify table columns as a prop
• Globally apply options to each data column
• Sorting utilities and abilities for each column
• Styling and overrides for the pagination links
• Filtering utilities
• Ability to provide slots in relation to various hooks provided throughout the component (integration with vue-slot-hooks - wip plugin)
• Install plugin with a global instance of Vue (i.e. not as plugin using Vue.use(TableFor))
• Release notes and tagged versions in Git

Acknowledgements

vue-table-for is more-or-less a direct port over of my Ruby on Rails' table-for Gem, which spawned out of my Ruby on Rails' blocks Gem. Upon learning VueJS, I realized that a ton of the concepts could be reused (and possibly improved) using VueJS syntax.

I also thank Fernando Garcia for recommending VueJS in the first place, helping me learn a lot of the ins and outs, and also acting as a collaborator for this plugin.

I studied the vue-fullscreen plugin and reproduced a lot of similar approaches for how that plugin is setup, particularly with how it is used to create its own documentation and examples.

I also followed used approaches from these two articles How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 and Writing a very simple plugin in Vue.js - (Example) in learning how to create a VueJS plugin.