Ignite UI

Code

var App = createReactClass({
	getInitialState: function () {
		return {
			view: sourceData
		}
	},
	render: function () {
		return (
			<div>
				<IgGrid 
					id="grid1"
					ref="grid1"
					autoGenerateColumns={false}
					dataSource={this.state.view}
					primaryKey="ProductID"
					autoCommit={true}
					width="700px"
					columns={[
						{ headerText: "Product ID", key: "ProductID", dataType: "number" },
						{ headerText: "Name", key: "Name", dataType: "string" },
						{ headerText: "Stock", key: "UnitsInStock", dataType: "number" },
						{ headerText: "UnitPrice", key: "UnitPrice", dataType: "number", format: "#.##" },
						{ headerText: "DateAdded", key: "DateAdded", dataType: "date", format: "dateTime" }
					]}
					responseDataKey="Products"
					features={[
						{ name: "Updating", editRowEnded: this.gridRowUpdated, enableAddRow: false, enableDeleteRow: false }
					]}
				/>
				<div className="col-sm-4">
					<input type="text"
						ref="editorName"
						id="editor"
						className="form-control" 
						onChange={this.editorHandleUpdate}
						value={this.state.nameValue}/>
				</div>
			</div>
		);
	},
	componentDidMount: function() {
		this.setState({
			nameValue: this.getNameByRowId(1)
		});
	},
	getGridInstance: function (gridRefName) {
		gridRefName = gridRefName || "grid1";
		return (this.refs[gridRefName] || {}).igControl;
	},
	getGridUpdating: function (gridRefName) {
		var grid = this.getGridInstance(gridRefName);
		if (!grid || !grid.element) {
			return null;
		}
		return grid.element.data("igGridUpdating");
	},
	getNameByRowId: function (rowId) {
		var grid = this.getGridInstance(),
			Name, record;
		if (rowId > -1 && grid) {
			record = grid.dataSource.findRecordByKey(rowId) || {};
			Name = record["Name"];
		}
		return Name;
	},
	editorHandleUpdate: function (e) {
		var grid = this.getGridInstance(),
			upd;
		if (grid) {
			upd = this.getGridUpdating();
			if (upd) {
				upd.updateRow(1, { "Name": this.refs.editorName.value });
				this.setState({
					nameValue: this.getNameByRowId(1)
				});
			}
		}
	},
	gridRowUpdated: function (evt, ui) {
		var rowId = 1;
		if (this.state.selectedRowId !== rowId) {
			return;
		}
		
		if (!ui.rowAdding &&
			ui.values["Name"] !== ui.oldValues["Name"]) {
			this.setState({
				nameValue: this.getNameByRowId(1)
			});
		}
	}
});

ReactDOM.render(
   <App />,
  document.getElementById("app")
);
					

Ignite UI controls are instantiated using ReactJS components. This example uses Babel.