@jiffylive/vue-j-table NPM

Demo

Install the component, run "cd node_modules/@jiffylive/vue-j-table" then "npm run serve" to see examples.
Online demo coming soon

Why use vue-j-table?

Simple - Easy to create a table
Editable - Editable via validation rules
Sorting - Sort by clicking on column name. Sortable by single column or all

Inputs (props)

:field - Array of Fields including model, label, format, formatParams, component eg {"model": "name", "label": "Name"},{"model": "emailAddress", "label": "Email address", "format": "email"}

:items - Array of items (arrays or objects)

:allColumnsSortable - Make all columns sortable

:removeFormatting (Boolean) - Remove the initial formatting to allow application to provide formatting

:tableClass - Add extra classes eg "striped hover"

Available rules

See vue-j-editable for rule definitions More info: https://www.npmjs.com/package/@jiffylive/vue-j-editable

They include:

Required
Email
minLength
numeric
decimal
currency (not supported by vuelidate but allows a $ or € symbol to be proceeding the figure)
URL

Custom component

Added support for custom component per column. Specify field.component which is passed a field and item parameter.

{"model": "image", "label": "Image", "component": "ImageItem", "type": "image"},

import ImageItem from "@/components/ImageItem.vue";
Vue.component('ImageItem', ImageItem);

Installation

1. Package Manager

# With npm
npm i @jiffylive/vue-j-table

import jTable from '@jiffylive/vue-j-table';

components: {
  jTable
}

<jTable :fields="fields" :items="items" :allColumnsSortable="true" tableClass="striped hover" @updateLive="updateLive" />