Yarn:
yarn add vue-table-for
Npm:
npm install vue-table-for
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)
LIVE DEMO for examples.
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>
<TableFor :records="records">
<td name="first_name" />
<td name="last_name" />
<td name="email" />
</TableFor>
</template>
<script>
export default {
props: {
records: Array
}
}
More documentation 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
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.