How to edit react bootstrap table and save data after editing

Question

how to edit table directly on the browser page and save data after reloading page. The table is made using react bootstrap table.screenshot of project is here.edit and save like in screenshot

code of my project is here.

onAfterSaveCell(value, name){
axios({
method:'post',
url:'https://something.something.com.somewhere/update_something',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-access-token':this.state.token
},
data:{
name:value[name]
}
})
.then((response)=>{
this .getCustomerData();
})
.catch((error)=>{
throw('error',error);
});
 }

react bootstrap is here

<BootstrapTable data={this.state.customer_data} search={true} cellEdit={ {
  mode: "click",
  blurToSave: true,
  afterSaveCell: this.onAfterSaveCell
 } } >
    <TableHeaderColumn dataField="tid" isKey = {true} dataSort={true} width="70">S.No</TableHeaderColumn>
    <TableHeaderColumn dataField="company_name" dataSort={true}>Company Name</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_address" dataSort={true}>Contact Address</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_person" dataSort={true}>Contact Person</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_number" dataSort = {true}>Contact Number</TableHeaderColumn>
 </BootstrapTable>

MacKentoch · Accepted Answer · 2017-02-16 14:36:23Z

1

Talking about v3.0.0-beta-11 (I didn't use it before).

There is no problem.

But in your code, you aren't in the right scope.

So just fix it so that onAfterSaveCell is called on your Component scope:

afterSaveCell: this.onAfterSaveCell.bind(this)

answered Feb 16, 2017 at 14:36

MacKentoch

2,4663 gold badges16 silver badges19 bronze badges

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

Comments

barnwaldo · Accepted Answer · 2020-03-26 18:46:05Z

0

Here is an implementation of a table using Reactstrap with cell-edit capability. Saving updates occurs with onBlur events. Cell-edit capability is enabled with html contentEditable=true for appropriate cells.

See https://github.com/msb1/reactstrap-functional-table

answered Mar 26, 2020 at 18:46

barnwaldo

5345 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to edit react bootstrap table and save data after editing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related