react-stn-grid

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.

Table of contents

1. Installation
2. Getting started
3. 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>
	
)
	}
}

License

MIT