Skip to content

hunterae/vue-table-for

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2614cc1 · Feb 22, 2021

History

36 Commits
Mar 4, 2020
Jun 28, 2019
Mar 4, 2020
May 1, 2019
Dec 17, 2018
May 1, 2019
Feb 1, 2021
Jun 28, 2019
Dec 11, 2018
Mar 4, 2020
Jan 4, 2019
Mar 4, 2020

Repository files navigation

vue-table-for

npm version

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.