6

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>
Pawan Bhusal
  • 131
  • 1
  • 1
  • 6

2 Answers2

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)
MacKentoch
  • 2,346
  • 3
  • 14
  • 19
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

barnwaldo
  • 386
  • 3
  • 8