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