title: Edit and Delete React Bootstrap table rows
body: <p>I am using Bootstrap table with columns to populate data. I have set up two action buttons, edit and delete. But I am not sure how to get those buttons to work. The code is:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Row, Col, Card, CardBody, CardTitle } from &quot;reactstrap&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  // datatable related plugins
  import BootstrapTable from &quot;react-bootstrap-table-next&quot;;
  import paginationFactory, {
    PaginationProvider,
    PaginationListStandalone,
    SizePerPageDropdownStandalone,
  } from &quot;react-bootstrap-table2-paginator&quot;;
  
  import ToolkitProvider, { Search } from &quot;react-bootstrap-table2-toolkit&quot;;
  
  //Import Breadcrumb
  import Breadcrumbs from &quot;../../components/Common/Breadcrumb&quot;;
  import &quot;./datatables.scss&quot;;
  
  // Table data
  const products = [
    {
      id: 1,
      name: &quot;Airi Satou&quot;,
      position: &quot;Accountant&quot;,
      office: &quot;Tokyo&quot;,
      age: &quot;33&quot;,
      startdate: &quot;2008/11/28&quot;,
      salary: &quot;$162,700&quot;,
    },
  
    {
      id: 2,
      name: &quot;Angelica Ramos&quot;,
      position: &quot;Chief Executive Officer (CEO)&quot;,
      office: &quot;London&quot;,
      age: &quot;47&quot;,
      startdate: &quot;2009/10/09&quot;,
      salary: &quot;$1,200,000&quot;,
    },
  ];
  
  class DatatableTables extends Component {
    constructor(props) {
      super(props);
      this.state = {
        breadcrumbItems: [
          { title: &quot;Tables&quot;, link: &quot;#&quot; },
          { title: &quot;Data Table&quot;, link: &quot;#&quot; },
        ],
        page: 1,
        sizePerPage: 10,
        productData: products,
      };
    }
  
    render() {
      const columns = [
        {
          dataField: &quot;id&quot;,
          text: &quot;Id&quot;,
          sort: true,
        },
        {
          dataField: &quot;name&quot;,
          text: &quot;Name&quot;,
          sort: true,
        },
        {
          dataField: &quot;position&quot;,
          text: &quot;Position&quot;,
          sort: true,
        },
        {
          dataField: &quot;office&quot;,
          text: &quot;Office&quot;,
          sort: true,
        },
        {
          dataField: &quot;age&quot;,
          text: &quot;Age&quot;,
          sort: true,
        },
        {
          dataField: &quot;startdate&quot;,
          text: &quot;Start Date&quot;,
          sort: true,
        },
        {
          dataField: &quot;salary&quot;,
          text: &quot;Salary&quot;,
          sort: true,
        },
        {
          dataField: &quot;menu&quot;,
          isDummyField: true,
          text: &quot;Action&quot;,
          formatter: () =&gt; (
            &lt;&gt;
              &lt;Link to=&quot;#&quot; className=&quot;me-3 text-primary&quot;&gt;
                &lt;i className=&quot;mdi mdi-pencil font-size-18&quot;&gt;&lt;/i&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;#&quot; className=&quot;text-danger&quot;&gt;
                &lt;i className=&quot;mdi mdi-trash-can font-size-18&quot;&gt;&lt;/i&gt;
              &lt;/Link&gt;
            &lt;/&gt;
          ),
        },
      ];
  
      const defaultSorted = [
        {
          dataField: &quot;id&quot;,
          order: &quot;asc&quot;,
        },
      ];
  
      const pageOptions = {
        sizePerPage: 10,
        totalSize: products.length, // replace later with size(customers),
        custom: true,
      };
  
      // Select All Button operation
      const selectRow = {
        mode: &quot;checkbox&quot;,
      };
  
      const { SearchBar } = Search;
  
      return (
        &lt;React.Fragment&gt;
          &lt;div className=&quot;page-content&quot;&gt;
            &lt;div className=&quot;container-fluid&quot;&gt;
              &lt;Breadcrumbs
                title=&quot;Tables&quot;
                breadcrumbItems={this.state.breadcrumbItems}
              /&gt;
  
              &lt;Row&gt;
                &lt;Col className=&quot;col-12&quot;&gt;
                  &lt;Card&gt;
                    &lt;CardBody&gt;
                      &lt;CardTitle className=&quot;h4&quot;&gt;Default Datatable &lt;/CardTitle&gt;
  
                      &lt;PaginationProvider
                        pagination={paginationFactory(pageOptions)}
                        keyField=&quot;id&quot;
                        columns={columns}
                        data={this.state.productData}
                      &gt;
                        {({ paginationProps, paginationTableProps }) =&gt; (
                          &lt;ToolkitProvider
                            keyField=&quot;id&quot;
                            columns={columns}
                            data={this.state.productData}
                            search
                          &gt;
                            {(toolkitProps) =&gt; (
                              &lt;React.Fragment&gt;
                                &lt;Row className=&quot;mb-2&quot;&gt;
                                  &lt;Col md=&quot;4&quot;&gt;
                                    &lt;div className=&quot;search-box me-2 mb-2 d-inline-block&quot;&gt;
                                      &lt;div className=&quot;position-relative&quot;&gt;
                                        &lt;SearchBar
                                          {...toolkitProps.searchProps}
                                        /&gt;
                                        &lt;i className=&quot;search-box chat-search-box&quot; /&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;
                                  &lt;/Col&gt;
                                &lt;/Row&gt;
  
                                &lt;Row&gt;
                                  &lt;Col xl=&quot;12&quot;&gt;
                                    &lt;div className=&quot;table-responsive&quot;&gt;
                                      &lt;BootstrapTable
                                        keyField={&quot;id&quot;}
                                        responsive
                                        bordered={false}
                                        striped={false}
                                        defaultSorted={defaultSorted}
                                        selectRow={selectRow}
                                        classes={
                                          &quot;table align-middle table-nowrap&quot;
                                        }
                                        headerWrapperClasses={&quot;thead-light&quot;}
                                        {...toolkitProps.baseProps}
                                        {...paginationTableProps}
                                      /&gt;
                                    &lt;/div&gt;
                                  &lt;/Col&gt;
                                &lt;/Row&gt;
  
                                &lt;Row className=&quot;align-items-md-center mt-30&quot;&gt;
                                  &lt;Col className=&quot;inner-custom-pagination d-flex&quot;&gt;
                                    &lt;div className=&quot;d-inline&quot;&gt;
                                      &lt;SizePerPageDropdownStandalone
                                        {...paginationProps}
                                      /&gt;
                                    &lt;/div&gt;
                                    &lt;div className=&quot;text-md-right ms-auto&quot;&gt;
                                      &lt;PaginationListStandalone
                                        {...paginationProps}
                                      /&gt;
                                    &lt;/div&gt;
                                  &lt;/Col&gt;
                                &lt;/Row&gt;
                              &lt;/React.Fragment&gt;
                            )}
                          &lt;/ToolkitProvider&gt;
                        )}
                      &lt;/PaginationProvider&gt;
                    &lt;/CardBody&gt;
                  &lt;/Card&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default DatatableTables;
  </code></pre>
  <p>I need to make the edit and delete buttons functional. Delete should remove the row and edit should let me make changes. The table is from a template hence I can not figure out how to make these changes. Any help will be appreciated</p>