ReactJS and FlexGrid

by Ross Dederer

HTML

<script src="https://fb.me/react-0.13.3.min.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.48/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.grid.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>   
<p>Pure JS Grid </p>
        <div id="gsFlexGrid"></div>
        <p>React JS Grid </p>
        <div id="grid_01"></div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
            var data = [];
            for (var i = 0; i < 6; i++) {
              data.push({
                id: i,
                country: countries[i % countries.length],
                amount: Math.random() * 10000,
              });
            }
            var grid = new wijmo.grid.FlexGrid('#gsFlexGrid');
               grid.autoGenerateColumns = false;
                   var cv = new wijmo.collections.CollectionView(data);
                // initialize grid
                grid.initialize({
                  itemsSource: cv
                });
            
            grid.itemFormatter = function(panel, r, c, cell){
                // validate CellType and if correct column
                if (wijmo.grid.CellType.Cell == panel.cellType &&
                  panel.columns[c].binding == 'amount') {

                  // get the cell's data
                  var cellData = panel.getCellData(r, c);

                  // set cell's foreground color
                  cell.style.color = getAmountColor(cellData);
                }
            };
         
            var c = new wijmo.grid.Column();
            c.binding = 'id';
            c.header = 'ID';
            c.width = '*';
            grid.columns.push(c);
             var c = new wijmo.grid.Column();
            c.binding = 'country';
            c.header = 'Country';
            c.width = '*';
            grid.columns.push(c);
             var c = new wijmo.grid.Column();
            c.binding = 'amount';
            c.header = 'Amount';
            c.width = '*';
            grid.columns.push(c);
              function getAmountColor(amount) {
               return amount < 500 ? 'red' : amount < 2500 ? 'black' : 'green';
            }



       /** @jsx React.DOM */   
var FlexGrid = React.createClass({
  render: function() {
    return (
     <div></div>
    );
  },

   getInitialState: function() {
    return {

      // Grid...