Simple Pretty Table Component For Vue.js – Data Tablee

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: "bseld[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