Guspread Sample

# Guspread [![Build Status](https://travis-ci.org/misu007/vue-guspread.svg?branch=master)](https://travis-ci.org/misu007/vue-guspread) Guspread is a Javascript Spreadsheet Component for Vue.

demo-image

## DEMO [https://misu007.github.io/vue-guspread/](https://misu007.github.io/vue-guspread/) ## Install ### NPM ``` npm install vue-guspread ``` After installing, please register the component either globaly or localy you would like. #### Global Registration ```js import VueGuspread from 'vue-guspread'; import 'vue-guspread/dist/vue-guspread.css'; Vue.use(VueGuspread); ``` #### Local Registration ```js import VGuspread from "vue-guspread"; export default { components: { VGuspread } } ``` ### CDN `` tag will be available after loading the javascript library. ```html ``` ## Get Started ### npm ```vue ``` ### CDN ```html Guspread Sample

``` ### Visualforce ```html Guspread Sample For Visualforce

``` ## Usage ### Props

Required	Prop Name	Type	Description	Default
*	value (v-model)	Array	An array of row item objects	[]
*	fields	Array	An array of column objects that each describe a header	[]
	color	String	Apply css color ('#ffffff' or rgb(65, 184, 131)) to the main controled color.	'#41b883'
	nameKey	String	The value of this property represents the field key of each items	'name'
	labelKey	String	The value of this property represents the default label of each fields	'label'
	cellClass	Function	You can optionaly customize the classname for each cells (td)	null
	rowClass	Function	You can optionaly customize the classname for each row (tr)	null
	cellReadonly	Function	You can optionaly apply readonly behavior for each cells	null
	hideMinimap	Boolean	Hide default mini map	false

### Events

Event Name	Payload	Description
changeEditMode	True (Edit mode) or False (Show mode)	Fired when changed between edit mode and show mode
changeScrolling	True (Edit mode) or False (Show mode)	Fired on scrolling started or finished
changeFocused	{"a": Object, "b": Object}	Fired when changed the rect focued cells. Both keys "a" and "b" have row index and col index

### Slots

Slot Name	Slot Props	Description
field	{"field": Object}	"field": Each field Object given as "fields" prop
cell	{"field": Object, "item": Object, "row": Number, "col": Number, "value": Any}	"item": Each row Object given as "value(v-model)" prop
input	{"field": Object, "item": Object}

## Example ```vue ```