gridvue2 v0.1.91

Gridvue2

The Gridvue2 is a GridView that view mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. The default GridView style implements buttons as column headers. By using buttons for column headers, you can implement important user interaction capabilities; for example, users can click the column header to sort GridView data according to the contents of a specific column.

Screenshot

Default theme screen shot link

Installation

npm install --save gridvue2

Basic Usage

Add this lines on top of your main.js:

import Vue from 'vue'
import GridVue2 from 'gridvue2'

Vue.component('gridvue2', GridVue2)

Add these lines in your vue file:

<template>
  <div id="app">
    <gridvue2 :Items="items" :Config="config" :Titles="titles"></gridvue2>
  </div>
</template>

<style>
  @import "~gridvue2/dist/css/gridvue2.css";
</style>

<script>
export default {
  data: function () {
    return {
      titles : [],
      config: {},
      items: [
        {
          "first_name": "Rebbecca",
          "last_name": "Didio",
          "company_name": "Brandt, Jonathan F Esq",
          "address": "171 E 24th St",
          "city": "Leith",
          "state": "TAS",
          "post": 7315,
          "phone1": "03-8174-9123",
          "phone2": "0458-665-290",
          "email": "rebbecca.didio@didio.com.au",
          "web": "http://www.brandtjonathanfesq.com.au"
        },
        {
          "first_name": "Stevie",
          "last_name": "Hallo",
          "company_name": "Landrum Temporary Services",
          "address": "22222 Acoma St",
          "city": "Proston",
          "state": "QLD",
          "post": 4613,
          "phone1": "07-9997-3366",
          "phone2": "0497-622-620",
          "email": "stevie.hallo@hotmail.com",
          "web": "http://www.landrumtemporaryservices.com.au"
        },
        {
          "first_name": "Mariko",
          "last_name": "Stayer",
          "company_name": "Inabinet, Macre Esq",
          "address": "534 Schoenborn St #51",
          "city": "Hamel",
          "state": "WA",
          "post": 6215,
          "phone1": "08-5558-9019",
          "phone2": "0427-885-282",
          "email": "mariko_stayer@hotmail.com",
          "web": "http://www.inabinetmacreesq.com.au"
        },
        {
          "first_name": "Gerardo",
          "last_name": "Woodka",
          "company_name": "Morris Downing & Sherred",
          "address": "69206 Jackson Ave",
          "city": "Talmalmo",
          "state": "NSW",
          "post": 2640,
          "phone1": "02-6044-4682",
          "phone2": "0443-795-912",
          "email": "gerardo_woodka@hotmail.com",
          "web": "http://www.morrisdowningsherred.com.au"
        },
        {
          "first_name": "Mayra",
          "last_name": "Bena",
          "company_name": "Buelt, David L Esq",
          "address": "808 Glen Cove Ave",
          "city": "Lane Cove",
          "state": "NSW",
          "post": 1595,
          "phone1": "02-1455-6085",
          "phone2": "0453-666-885",
          "email": "mayra.bena@gmail.com",
          "web": "http://www.bueltdavidlesq.com.au"
        },
        {
          "first_name": "Idella",
          "last_name": "Scotland",
          "company_name": "Artesian Ice & Cold Storage Co",
          "address": "373 Lafayette St",
          "city": "Cartmeticup",
          "state": "WA",
          "post": 6316,
          "phone1": "08-7868-1355",
          "phone2": "0451-966-921",
          "email": "idella@hotmail.com",
          "web": "http://www.artesianicecoldstorageco.com.au"
        }
      ]
    }
  }
}
</script>

Data Binding

You should pass your data in JSON format to 'Items' property.

Titles

This is an optional option to show your own titles to header of the Gridvue. If you leave it empty Gridvue show the object keys in header please see the following exmaple:

this.titles = ['ID', 'First Name', 'Last Name']

Configuration

You can do some professional config please pay attention to following table:

Prefix of all the configs are "this.config." for example: this.config.search.status = true

Contact me

imanfava@gmail.com