title: Adding Edit button with icon in a react-bootstrap-table2
body: <p>I want a column like this in the table to edit the whole <strong>corresponding row</strong> <em>corresponding to each edit button</em> in react-Bootstrap_<strong>table2</strong></p>
  <p>Sample Image of What I want to do:</p>
  <p><img src="https://i.stack.imgur.com/RYTwN.png" alt="1" /></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;../../node_modules/bootstrap/dist/css/bootstrap.min.css&quot;;
  import BootstrapTable from &quot;react-bootstrap-table-next&quot;;
  import paginationFactory from &quot;react-bootstrap-table2-paginator&quot;;
  import cellEditFactory from &quot;react-bootstrap-table2-editor&quot;;
  
  export class Table extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        data: [
          {
            id: 1,
            dn: &quot;Gob&quot;,
            f: &quot;wah&quot;,
            ct: &quot;2&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 2,
            dn: &quot;Buster&quot;,
            f: &quot;wah&quot;,
            ct: &quot;5&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 1,
            dn: &quot;Gob&quot;,
            f: &quot;wah&quot;,
            ct: &quot;2&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 2,
            dn: &quot;Buster&quot;,
            f: &quot;wah&quot;,
            ct: &quot;5&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          },
          {
            id: 3,
            dn: &quot;George Michael&quot;,
            f: &quot;wah&quot;,
            ct: &quot;4&quot;,
            cr: &quot;acha&quot;,
            dsf: 12,
            dsp: 30
          }
        ],
        columns: [
          {
            dataField: &quot;dn&quot;,
            text: &quot;Doctor Name&quot;,
            sort: true
          },
          {
            dataField: &quot;f&quot;,
            text: &quot;Facility&quot;,
            sort: true
          },
          {
            dataField: &quot;ct&quot;,
            text: &quot;Consultation Type&quot;,
            sort: true
          },
          {
            dataField: &quot;cr&quot;,
            text: &quot;Consultation Rate&quot;,
            sort: true
          },
          {
            dataField: &quot;dsf&quot;,
            text: &quot;Doctor Share (Fixed)&quot;,
            sort: true,
            style: { backgroundColor: &quot;#e0f7fa&quot; }
          },
          {
            dataField: &quot;dsp&quot;,
            text: &quot;Doctor Share(%)&quot;,
            sort: true,
            style: { backgroundColor: &quot;#fbe9e7&quot; }
          },
          {
            dataField: &quot;edit&quot;,
            text: &quot;Edit&quot;,
            editCellStyle: (cell, row, rowIndex, colIndex) =&gt; {
              const icon = { style: 'class=&quot;glyphicon glyphicon-pencil&quot;&gt;' };
              return { icon };
            }
          }
        ]
      };
    }
  
    render() {
      const selectRow = {
        mode: &quot;checkbox&quot;,
        clickToSelect: true
      };
  
      // const editFormatter = (cell, row, rowIndex, formatExtraData) =&gt; {
      //   &lt;Button
      //     icon
      //     labelPosition=&quot;left&quot;
      //     onClick={() =&gt; deleteMe(rowIndex, rowId)}
      //   &gt;
      //     &lt;Icon name=&quot;remove&quot; /&gt; Remove{&quot; &quot;}
      //   &lt;/Button&gt;;
      // };
      const customTotal = (from, to, size) =&gt; (
        &lt;span className=&quot;react-bootstrap-table-pagination-total&quot;&gt;
          Showing {from} to {to} of {size} Results
        &lt;/span&gt;
      );
  
      return (
        &lt;div className=&quot;container&quot; style={{ marginTop: 50 }}&gt;
          &lt;BootstrapTable
            striped
            hover
            keyField=&quot;dn&quot;
            data={this.state.data}
            columns={this.state.columns}
            pagination={paginationFactory({ nextPageText: &quot;Next&quot; })}
            selectRow={selectRow}
            cellEdit={cellEditFactory({ mode: &quot;click&quot; })}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>How can I add buttons in the column of <strong>Edit</strong> ?
  so that I should be able to edit a row.
  I know there must be some mechanism to customize the column and add
  Icons like mentioned in the Image.</p>