title: Edit row on Edit button click in 'react-bootstrap-table-next'
body: <p>I am trying to implement a table using 'react-bootstrap-table-next'. <strong>I want the row to be editable only after the click of the 'edit' button.</strong> Currently, with my code on click of the cell, the cell is changed into an editable cell.</p>
  
  <p>Screenshot of what I want to achieve.</p>
  
  <p><a href="https://i.stack.imgur.com/pgPBl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pgPBl.png" alt="enter image description here"></a></p>
  
  <p><strong><em>My Code:</em></strong></p>
  
  <pre><code>import BootstrapTable from 'react-bootstrap-table-next'
  import cellEditFactory from 'react-bootstrap-table2-editor';
  
   const buttonFormatter = (cell, row) =&gt; {
      console.log(cell,row)
      return &lt;Button onClick={()=&gt;{editTenantHandler(cell,row)}}&gt;&lt;FaEdit/&gt;&lt;/Button&gt;;
  }
  
    const columns = [{
      dataField: 'tenantName',
      text: 'Tenant Name',
      headerStyle: {
        color: 'white'
      }
    }, {
      dataField: 'email',
      text: 'Email',
      headerStyle: {
        color: 'white'
      }
    }, {
        dataField: 'mobile',
        text: 'Mobile',
        headerStyle: {
          color: 'white'
        }
      },
      {
        dataField: 'actions',
        text: 'Actions',
        isDummyField: true,
        csvExport: false,
        formatter: buttonFormatter,
        headerStyle: {
          color: 'white'
        }
      }];
  
    &lt;BootstrapTable 
       keyField='tenantName' 
       data={ props.tenants } 
       columns={ columns } 
       cellEdit={ cellEditFactory({mode: 'click'}) }/&gt;
  
  </code></pre>