Description:
A simple, lightweight, pretty nice table component for Vue.js that features dynamic rendering, data sorting and more.
Import:
import Vue from 'vue' import DataTablee from 'vue-data-tablee'
The sample app.
Vue.use(vueDataTablee, { name: "c-table" }); new Vue({ el: "#app", data() { return { cols: [ { label: "Name", field: "name" }, { label: "Birth Date", field: "birth_date", sort: (a, b) => new Date(a).getTime() - new Date(b).getTime() }, { label: "Gender", field: "gender", sort: false }, { label: "City", field: "address.city" } ], rows: getUsers() }; } }); function getUsers() { return [ { id: "daa3daeb-91c6-42f8-aaf4-4e80c297c000", name: "Darsie Tellett", email: "[email protected]", gender: "Male", birth_date: "1990-07-12", address: { country: "United States", zip: "84130", province: "Utah", city: "Salt Lake City", street: "Schurz", number: "08529" } }, { id: "37742e75-6839-461a-8727-d00b4333176a", name: "Hilarius Jeaffreson", email: "[email protected]", gender: "Male", birth_date: "1993-06-13", address: { country: "United States", zip: "34290", province: "Florida", city: "North Port", street: "Milwaukee", number: "0" } }, { id: "a6ebf9ee-3cc5-4384-b73c-594a79207774", name: "Lyman Haxley", email: "[email protected]", gender: null, birth_date: "1972-12-29", address: { country: "United States", zip: "77260", province: "Texas", city: "Houston", street: "Scoville", number: "9514" } }, { id: "77b39998-188a-4967-a960-12372308345c", name: "Lock Kearney", email: "[email protected]", gender: "Male", birth_date: "1983-01-17", address: { country: "United States", zip: "43215", province: "Ohio", city: "Columbus", street: "5th", number: "36" } }, { id: "df88b137-fc34-4bd4-b32a-595f79867906", name: "Ame Blachford", email: "[email protected]", gender: "Female", birth_date: "1974-03-04", address: { country: "United States", zip: "32803", province: "Florida", city: "Orlando", street: "Hovde", number: "6251" } }, { id: "d18a89e9-a707-4bed-9b75-73a1e712714b", name: "Bobbye Seldon", email: "[email protected]", gender: "Male", birth_date: "1993-07-23", address: { country: "United States", zip: "83757", province: "Idaho", city: "Boise", street: "Delaware", number: "9754" } } ]; }
Default props.
/** * List of col's data. */ cols: { type: Array, required: true, validator: isContent }, /** * List of row's data. */ rows: { type: Array, required: true, validator: isContent }, /** * Empty cell's character. */ empty: { type: String, default: '' }
Preview:
Download Details:
Author: VitorLuizC
Live Demo: https://codepen.io/VitorLuizC/pen/qVJZoQ
Download Link: https://github.com/VitorLuizC/vue-data-tablee/archive/master.zip
Official Website: https://github.com/VitorLuizC/vue-data-tablee
Install & Download:
# NPM
$ npm install vue-data-tablee --save