Edit a cell from another cell

[ArpanaGupta]

We have a table with 2 columns. One displays name and other edit button.
Requirement is on click of edit button the name should become editable. Not able to implement it.

I am unable to get access to the 'name; cell in onclick function of edit button.

[ArpanaGupta]

window.MyList = React.createClass({
render : function() {
var cellEdit = {mode: 'click'};

		return( 
				<div className="colxq-xs-12 col-md-10"> 					
				 	 <BootstrapTable ref="myTable" data={this.props.myList} pagination options={tableOptions} striped hover bordered={false} cellEdit={cellEdit}>
				      	      <TableHeaderColumn dataField='id' isKey hidden>Id</TableHeaderColumn>
					      <TableHeaderColumn ref="myName" dataField='name' dataFormat={colLinkFormatter} dataSort>Location</TableHeaderColumn>
					      <TableHeaderColumn dataFormat={this.buttonsFormatter} dataSort editable={false}>Actions</TableHeaderColumn> 
					</BootstrapTable>
			         </div>   
		);
	
},

buttonsFormatter: function(cell,row) {
	return (<span><a className="btn btn-default btn-xs" onClick={this.handleEditName.bind(this, row,cell)}>Edit</a></span>)

},

handleEditName : function(row, cell) {
	console.log("in handleEdit");
	// *****programmatically call click function of  name cell here	
},

});

function colLinkFormatter(cell, row) {
return (
<window.ReactRouter.Link to={'/test/' + row.id}>
{cell}
</window.ReactRouter.Link>
)
}

[ArpanaGupta]

The above is full code.
Please suggest how can I invioke onclick event of the 'Name' cell column from handleEditName().

[AllenFang]

HI @ArpanaGupta it's not able to achieve currently. I'll implement this feature on react-bootstrap-table2. thanks