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