Quick Start

Installation

Using Common JS

React Grid is available in the npm repository. You can install it from the command line using the following commands

npm install react --save

npm install adazzle-react-grid --save

Once downloaded, require both React and React Grid and you should be good to go

var React = require('react/addons'); 
var ReactGrid = require('adazzle-react-grid');

If you want to use extra features such as built in editors, formatters, toolbars and other plugins, you need to require the addons module instead

var ReactGridAddons = require('adazzle-react-grid/addons');

Using Distribution Scripts

If you prefer not to use a module system, you can reference the distribution scripts directly in your html pages. First you need to download the scripts. This can be done in 3 ways, either download directly from github source, using npm as above or using bower
bower install adazzle/react-grid --save

<script src="//fb.me/react-0.12.0.js"></script>
<script type="text/javascript" src="react-grid/dist/reactGrid.js"></script>

<script type="text/javascript" src="react-grid/dist/ReactGridWithAddons.js"></script>"

A Simple Example

The columns is a column specification, it provides information to grid on how to extract data for each of the column and how column should be represented and its features:

var columns = [
	{
		key: 'id',
		name: 'ID'
	},
	{
		key: 'title',
		name: 'Title'
	},
	{
		key: 'count',
		name: 'Count'
	}
	]

The rows property should be an array of objects whose property names match the key property of each column

var getRows = function(start, end) {
	var result = []
	for (var i = start; i < end; i++) {
		result.push({
			id: i,
			title: 'Title ' + i,
			count: i * 1000
		});
	}
	return result;
};
var rows = getRows(0,1000);

Now simply invoke React.render(..):

React.render(<ReactGrid columns={columns} rows={rows} />, document.getElementById('example'))