react-bootstrap-table - react-bootstrap-table: How to handle key fields with database generated values?

Question

I am writing a CRUD application using react-bootstrap-table to edit records stored in a database table. The primary key is database generated (an int field that gets an incremented value when inserting the record in the database). The TableHeaderColumn for this field is defined with isKey={true}.

I am having trouble getting the insert dialog to work with this. When hiding the column for insert (hiddenOnInsert), the dialog reports the validation error "id can't be empty value."

I searched for a way to call a function before the insert dialog is opened, to be able to set a dummy value to the key column of the created row, but without luck.

How can I use the insert dialog with key columns that are database generated?

Answer 1

Found the answer myself: A function set to the onAddRow property is only invoked before a new row is added via the insert row dialog. I use this to write a dummy value like 0 or "" to the key field. I also hide the key field for insert by setting hiddenOnInsert in the TableHeaderColumn. After inserting (in a function set to afterInsertRow) I add the new entity to the database via REST. The REST method returns the new key value. I set this value to the key field of the inserted entity to avoid the bootstrap table to complain about existing key values next time a new entity is inserted.

Answer 2

I know you said you've found your fix but, as @enkara, others might come to the same problem, like myself.

I solved it by updating the row with 'row.pk = newPk' on fetch callback in 'onAfterInsertRow' function:

onAfterInsertRow(row) {

    fetch(...).then(response => {
        if (response.ok ) {

            response = response.json();
            response.then((newPk) => {

                row.pk = newPk
            })

            return response;
        }

        return response.json()
    }).then(...).catch(...)
}