Adding Edit button with icon in a react-bootstrap-table2

Question

I want a column like this in the table to edit the whole corresponding row corresponding to each edit button in react-Bootstrap_table2

Sample Image of What I want to do:

import React from "react";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import cellEditFactory from "react-bootstrap-table2-editor";

export class Table extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          id: 1,
          dn: "Gob",
          f: "wah",
          ct: "2",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 2,
          dn: "Buster",
          f: "wah",
          ct: "5",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 1,
          dn: "Gob",
          f: "wah",
          ct: "2",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 2,
          dn: "Buster",
          f: "wah",
          ct: "5",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        },
        {
          id: 3,
          dn: "George Michael",
          f: "wah",
          ct: "4",
          cr: "acha",
          dsf: 12,
          dsp: 30
        }
      ],
      columns: [
        {
          dataField: "dn",
          text: "Doctor Name",
          sort: true
        },
        {
          dataField: "f",
          text: "Facility",
          sort: true
        },
        {
          dataField: "ct",
          text: "Consultation Type",
          sort: true
        },
        {
          dataField: "cr",
          text: "Consultation Rate",
          sort: true
        },
        {
          dataField: "dsf",
          text: "Doctor Share (Fixed)",
          sort: true,
          style: { backgroundColor: "#e0f7fa" }
        },
        {
          dataField: "dsp",
          text: "Doctor Share(%)",
          sort: true,
          style: { backgroundColor: "#fbe9e7" }
        },
        {
          dataField: "edit",
          text: "Edit",
          editCellStyle: (cell, row, rowIndex, colIndex) => {
            const icon = { style: 'class="glyphicon glyphicon-pencil">' };
            return { icon };
          }
        }
      ]
    };
  }

  render() {
    const selectRow = {
      mode: "checkbox",
      clickToSelect: true
    };

    // const editFormatter = (cell, row, rowIndex, formatExtraData) => {
    //   <Button
    //     icon
    //     labelPosition="left"
    //     onClick={() => deleteMe(rowIndex, rowId)}
    //   >
    //     <Icon name="remove" /> Remove{" "}
    //   </Button>;
    // };
    const customTotal = (from, to, size) => (
      <span className="react-bootstrap-table-pagination-total">
        Showing {from} to {to} of {size} Results
      </span>
    );

    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable
          striped
          hover
          keyField="dn"
          data={this.state.data}
          columns={this.state.columns}
          pagination={paginationFactory({ nextPageText: "Next" })}
          selectRow={selectRow}
          cellEdit={cellEditFactory({ mode: "click" })}
        />
      </div>
    );
  }
}

How can I add buttons in the column of Edit ? 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.

Answer 1

You can add a dummy field in your column definitions and reference a formatter that can render a component in the column for each row. The component, in our case, is an ActionsFormater that we use to render several buttons (view,edit,delete) that can act on the id passed in for each row.

{
    dataField: 'actions',
    text: 'Actions',
    isDummyField: true,
    csvExport: false,
    formatter: this.actionsFormatter,
  },

actionsFormatter = (cell, row) => <ActionsFormatter id={row.id} />;

Which looks like so:

Answer 2

I made this function and returned the EditIcon button component.

function rankFormatter(cell, row, rowIndex, formatExtraData) { 
     return ( 
           < div 
               style={{ textAlign: "center",
                  cursor: "pointer",
                 lineHeight: "normal" }}>

        < EditIcon
          style={{ fontSize: 20 }}
          color="disabled"  
         /> 
      </div> 
 ); } 

This is the column where I have assigned the rankFormatter function to the formatter.

      { dataField: "edit", 
        text: "Edit",
        sort: false,
        formatter: rankFormatter,
        headerAttrs: { width: 50 },
        attrs: { width: 50, class: "EditRow" } 
      }

This works exactly the way I wanted it to be..!