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