PrimeReact DataTable cell editing no working correctly with async calls

Question

am facing this problem when i try to update a cell in the data table , the value is not updated imedietly (visual update) , the new value is shown when i click on another cell , here is part of updating code:

const onCellEditComplete = async (e) => {
let { rowData, column, newValue, field, originalEvent: event } = e;
//check if the new value is valid
if (isPositiveInteger(newValue) && newValue.toString().length > 0) {
let { error } = await productService.addPriceItem(
rowData["id" + field],
rowData.idItem,
column.key.substring(4),
newValue
);

if (error) {
showError(error.message);
event.preventDefault();
} else {
rowData[field] = newValue;  //update the value
}
} else event.preventDefault(); //cancel update for invalid values
};

the column code is shown bellow:

 <Column
                key={idTarif}
                field={field}
                header={header}
                style={{ minWidth: "100px" }}
                headerClassName="pi pi-calendar-plus"
                body={priceBodyTemplate}
                editor={(options) => cellEditor(options)}
                onCellEditComplete={onCellEditComplete}
              />

thanks in advance

Answer 1

In order to update the typed value immediately, you need to call the options.editorCallback function in the InputText onChange event. This updates the options.value and renders the updated value.

Please refer to the below code:

const cellEditor = (options) => {
    return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} />;
}