vue-xgrid-lib

XGrid a simple spreadsheet component for VueJS

Installation:

1. npm install vue-xgrid-lib --save
2. next import the following files to main.js

import Vue from 'vue'
import grid from 'vue-xgrid-lib'
import 'vue-xgrid-lib/dist/xgrid.css'

Vue.component('x-grid',grid.XGrid);

Usage:

Basic example:

    <x-grid :columns="columns" :data="data"></x-grid>

Sample Data:

   data:()=>({
      columns:[
          {
              text:'',
              type:"button",
              width:"120px",
              buttons:[
                  {
                      text:'Edit',
                      type:'btn-primary',
                      onClick:(cell,e) => {
                          console.log(cell,e);
                      }
                  },
                  {
                      text:'Delete',
                      type:'btn-danger',
                      onClick:(cell,e) => {
                          console.log(cell,e);
                      }
                  }
              ]
          },
          {text:'Name',value:'name',width:"200px",readonly:true},
          {
              text:'Gender',
              value:'gender_id',
              type:'autocomplete',
              items:[
                  { id:1, name:'Male'},
                  { id:2, name:'Female'},
                  { id:3, name:'Unknown'}
              ],
              itemValue:'id',
              itemText:'name'
          },
          {text:'Age',value:'age',type:'number',readonly:true},
          {text:'Address',value:'address',width:'400px'},
          {text:'Email',value:'email',readonly:true},
          {text:'Remarks',value:'remarks'}
      ],
      data:[
          {id:1, name:'Juan Tamad', gender_id:1,age:25,address:'Bacolod City',email:"[e-mail]",remarks:""},
          {id:2, name:'Pedro Kinki', gender_id:2,age:25,address:'Bacolod City',email:"[e-mail]",remarks:""},
          {id:3, name:'San Miguel', gender_id:1,age:25,address:'Bacolod City',email:"[e-mail]",remarks:""},
          {id:3, name:'John Doe', gender_id:1,age:25,address:'Bacolod City',email:"[e-mail]",remarks:""}
      ]
   })

#DOCUMENTATION

##Basic Properties:

    1. column - (required) accepts an array of objects that will define the grid headers
    2. data - (required) accepts an array of objects display in the grid body
    3. height - (default:auto) accepts string value and set the height of the grid. e.g (200px)
    4. width -  (default:auto) accepts string value and set the width of the grid. e.g (500px)

##COLUMN:

###Common Properties

Properties use by all types of column

text: the text displayed on the column header.

value: should be aligned to the data object, this will define what value will be displayed on the data cell.

type: defines what type of column should be use to manage data cell. e.g.(number,button or autocomplete)

width: set the with of the column

readonly: set the column to readonly

###Column Types/Cell Types

####1. Default : The default columnn if no column type is supplied. accepts string or numeric value. columns:[ {text:'Name',value:'remarks'} ]

or

columns:[
    {text:'Name',value:'name',type:'default'}
]

####2. Number : accepts numeric value. columns:[ {text:'Age',value:'age',type:'number'} ] ####3. Autocomplete : additional properties: items, itemValue, itemText. filters base on the supplied items and itemText.

columns:[
    {
      text:'Gender',
      value:'gender_id',
      type:'autocomplete',
      items:[
          { id:1, name:'Male'},
          { id:2, name:'Female'},
          { id:3, name:'Unknown'}
      ],
      itemValue:'id',
      itemText:'name'
    }
]

####4. Button : additional property buttons an array of object that defines the buttons to be displayed. BUTTON PROPERTIES:

1. text: the text on the button
2. type: sets the color of the button, base on bootstrap buttons e.g.(btn-primary, btn-info, btn-danger, btn-warning, btn-light)

BUTTON EVENT:

1. onClick : accepts callback function that returns the cell data and e the click event.

columns:[
    {
      text:'',
      type:"button",
      width:"120px",
      buttons:[
          {
              text:'Edit',
              type:'btn-primary',
              onClick:(cell,e) => {
                  console.log(cell,e);
              }
          },
          {
              text:'Delete',
              type:'btn-danger',
              onClick:(cell,e) => {
                  console.log(cell,e);
              }
          }
      ]
    }
]

#Remarks:

There are still bug-fix and optimazation being done for the moment. If you have any suggestions or clarification please contact me through my email [e-mail]. Thank you.