JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="employees"></div>
JavaScript 1.7
/** @jsx React.DOM */
function copy(obj) {
var newObj = {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
var Cell = React.createClass({
propTypes: {
data: React.PropTypes.string.isRequired,
// Will be called with the new value for the cell
onChange: React.PropTypes.func.isRequired
},
handleChange: function(evt) {
this.props.onChange(evt.target.value);
},
render: function() {
return <input value={this.props.data} onChange={this.handleChange} />
}
});
var Row = React.createClass({
propTypes: {
data: React.PropTypes.object.isRequired,
// Will be called with a cell's name and its new value
onCellChange: React.PropTypes.func.isRequired
},
handleChange: function(prop, val) {
// (Since this function simply calls this.props.onCellChange, we could
// instead refer to the callback directly below.)
this.props.onCellChange(prop, val);
},
render: function() {
return <div className="row">
<Cell data={this.props.data.name}
onChange={this.handleChange.bind(null, "name")} />
<Cell data={this.props.data.location}
onChange={this.handleChange.bind(null, "location")} />
<Cell data={this.props.data.phone}
onChange={this.handleChange.bind(null, "phone")} />
</div>;
}
});
var Grid = React.createClass({
propTypes: {
data: React.PropTypes.array.isRequired,
// Will be called with a cell's row index, name, and new value
onCellChange: React.PropTypes.func.isRequired
},
render: function() {
var rows = this.props.data.map(function(rowData, index) {
return <Row key={index} data={rowData}
onCellChange={this.props.onCellChange.bind(null, index)} />;
}, this);
...