React-stn-grid NPM

React-Grid

A highly scalable grid component written in javscript with respective React

Note: while Grid is fully functional it is still in beta. Use at your own risk and please file any issues on GitHub.

Installation
Getting started
License

Installation

Install react-grid via NPM, using the command below

NPM

npm install --save react-stn-grid

Getting started

import React from 'react';
import StnGrid from 'react-stn-grid';
class RTable1 extends React.Component{

	constructor(props){
		super(props);
		this.state ={
		column:[
			{Name:'LotNumber',Type:'string',hidden:false,Title:'Lot Number'},
			{Name:'Equipment',Type:'string',hidden:false,Title:'Equipment'},
			{Name:'Process',Type:'string',hidden:false,Title:'Process'},
			{Name:'WIPType',Type:'string',hidden:false,Title:'WIP Type'},
			{Name:'Step',Type:'string',hidden:false,Title:'WIP Step'}	
			],// Column Details
		Data:[{
			"LotNumber": "Lot-11069",
			"Equipment": "Chevrolet",
			"Process": "Apiaceae",
			"WIPType": "Whorled Marshpennywort",
			"Step": "End of the Game (Der Richter und sein Henker)"
		  }, {
			"LotNumber": "Lot-13056",
			"Equipment": "Subaru",
			"Process": "Cactaceae",
			"WIPType": "Johnson's Fishhook Cactus",
			"Step": "Fan, The"
		  }, {
			"LotNumber": "Lot-33591",
			"Equipment": "Mercedes-Benz",
			"Process": "Bombacaceae",
			"WIPType": "Ceiba",
			"Step": "Cosmic Psychos: Blokes You Can Trust"
		  }, {
			"LotNumber": "Lot-04676",
			"Equipment": "Lincoln",
			"Process": "Scrophulariaceae",
			"WIPType": "Whipple's Penstemon",
			"Step": "Child's Play"
		  }, {
			"LotNumber": "Lot-18218",
			"Equipment": "Chrysler",
			"Process": "Lamiaceae",
			"WIPType": "Phyllostegia",
			"Step": "Orders Signed in White"
		  }, {
			"LotNumber": "Lot-16689",
			"Equipment": "Mercedes-Benz",
			"Process": "Polygalaceae",
			"WIPType": "Sierra Milkwort",
			"Step": "State Affairs (Une affaire d'état)"
		  }, {
			"LotNumber": "Lot-54132",
			"Equipment": "Mazda",
			"Process": "Malvaceae",
			"WIPType": "Island Mallow",
			"Step": "Drunks"
		  }, {
			"LotNumber": "Lot-47523",
			"Equipment": "Cadillac",
			"Process": "Scrophulariaceae",
			"WIPType": "Rocky Ledge Penstemon",
			"Step": "Chinatown"
		  }, {
			"LotNumber": "Lot-23786",
			"Equipment": "Honda",
			"Process": "Poaceae",
			"WIPType": "Bearded Sprangletop",
			"Step": "Almost an Angel"
		  }, {
			"LotNumber": "Lot-12638",
			"Equipment": "Subaru",
			"Process": "Campanulaceae",
			"WIPType": "Bellflower",
			"Step": "Hidden Agenda"
		  }]// Row Data
		}
	}

	render(){
	
		return(
			
				
				<StnGrid RtCol={this.state.column} RtRow ={this.state.Data}></StnGrid>
			
		)
	}
}