Search code examples
reactjsdelete-rowreact-bootstrap-table

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


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;

Solution

  • 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.