how to do delete function with a delete button in react bootstrap row event?

Question

I have a data representing table in React. Their last 2 columns separate for edit button and delete button.

What I want is when I press the delete button I want to get the index of the row and according to that index, I want to get some data to perform the Axios call. Getting index I used react bootstrap table rowEvents as follows. please see the following code snippet and correct the way it should be.

class ViewEmp extends React.Component{

    constructor(props) {
        super(props);
    }

    rowEvents = {
        onClick: (e, row, rowIndex) => {
           
        }
    };

    handleDelete = (e) =>{
       console.log("delete")
    }

    delete = () =>{
        return <Button color="danger" onClick={
        this.handleDelet}> Delete </Button>;
    }

   columns = [{
        dataField: 'emp_id',
        text: 'Employee ID'
    }, {
        dataField: 'firstName',
        text: 'First Name'
    },{
       text: 'Delete',
       formatter: this.delete
   }];

    render() {
       
        return (
            <Container style={{paddingTop: '10px', /*background: '#102454'*/}}>

                <Row style={{paddingTop: '10vh'}}>
                    <BootstrapTable
                        striped={true} hover={true}
                        keyField='emp_id'
                        data={ this.state.employeeList }
                        columns={ this.columns }
                        rowEvents={ this.rowEvents }
                        pagination={paginationFactory()}>

                    </BootstrapTable>
                    {component}

            </Row>
            </Container>
        );
    }
}
export default ViewEmp;

Could you create a working example in CodeSandbox?

Titulum
– Titulum

2020-09-11 07:33:56 +00:00
Commented Sep 11, 2020 at 7:33 — Titulum
– Titulum, Commented Sep 11, 2020 at 7:33

dasun_001 · Accepted Answer · 2020-09-11 14:30:08Z

4

It took several hours for me to find out the solution. Actually there is no direct function or any other thing. Simply writing inside formatter.

    const dealColumns = [
      // Other data columns
    
      {
      
        formatter: (cellContent, row) => {
          return (
            <button
              className="btn btn-danger btn-xs"
              onClick={() => this.handleDelete("name of a data field and this will return 
              the value of that cell")}
            >
              Delete
            </button>
          );
        },
      },
    ];
    
   handleDelete = (rowId) => {
      console.log(rowId);
    };

Here is the reference. https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/544

Thanks.

answered Sep 11, 2020 at 14:30

dasun_001

1692 gold badges4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

abiiramm · Accepted Answer · 2021-05-28 17:44:17Z

Thanks to @dasun_001, for quick implementation sharing the code. Heads up: removing cellContent will not work. I did not do much research further. Hope someone finds it helpful.

const dealColumns = [
  {
    dataField: "id",
    text: "No.",
  },
  {
    dataField: "name",
    text: "First Name",
  },
// columns follow dataField and text structure
  {
    dataField: "remove",
    text: "Delete",
    formatter: (cellContent, row) => {
      return (
        <button
          className="btn btn-danger btn-xs"
          onClick={() => handleDelete(row.id, row.name)}
        >
          Delete
        </button>
      );
    },
  },
];

const handleDelete = (rowId, name) => {
  console.log(rowId, name);
  //1 YourCellName
};

Collectives™ on Stack Overflow

how to do delete function with a delete button in react bootstrap row event?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related