React BootstrapTable field editing issue

29 Views Asked by At

I'm using the BootstrapTable and TableHeaderColumn in an old React project. My problem is I have to make specific fields editable according to the kind of data I have in my DB, and when I set the editable property of my TableHeaderColumn as async it just always returns true, or at least doen't returns false, so my table is always editable no matter what the result from the request was. The jist of the code is the following

<BootstrapTable
  data={list}
  expandableRow={isExpandableRow}
  expandComponent={expandComponent}
  expandColumnOptions={{ expandColumnVisible: true }}
  cellEdit={ cellEditProp }
  tableHeaderClass="bg-green"
  striped
  hover
  search
  pagination
  responsive
  ref={this.setTableRef}
>
  <TableHeaderColumn dataField="property" editable={ async (cel, row) => await this.isRowEditable(cel, row)} width="135px">Property</TableHeaderColumn>

and my isRowEditable function is the following

async isRowEditable(cel, row) {
    const { currentState } = this.props;
    const { listEditable } = this.state;
    
    let response = await getEditableItem(row.code)
      
    return response;
}

response is a boolean value, so it always shows me true or false, but when I use it inside the editable property in TableHeaderColumn tag it just does not work. If I don't use async inside editable it starts denying the edition to all rows, while if I leave the async in it starts to allow every row to be edited. At the same time, if I remove the async from my isRowEditable function and use a .then to return my response, it just allows every row to be edited as if I had put and async statement before the function declaration on editable.

Any solution for my problem? I really need to consult the database everytime I'm deciding if he field can be edited.

0

There are 0 best solutions below