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.