Hello,

I'm working with a mysql database table, where there is an id column which is filled in with auto-incremented number upon adding a row. So, when I add a row with a fetch POST request, I get a response, which gives me the id of the added row. This id I want to add to the mdb datatable instance.

I'm trying the code below, but the id is not added to the table, unless I update the instance, or if I insert the value manually (last tr of table > first td.innerHTML = unit.id).

Is there a way to modify a row value using TableEditor, without updating the instance ?

const unitsTable = document.getElementById('units-table')

    const columns = [
        { label: 'ID', field: 'id', inputType: 'number', editable: false },
        { label: 'Name', field: 'unit_name', inputType: 'text' },
        { label: 'Description', field: 'description', inputType: 'text' }
    ]

    const asyncUnitsTable = new TableEditor(
        unitsTable, 
        { columns }, 
        { 
            loading: true,
            loadingMessage: 'Loading Units...',
            confirm: true,
            confirmText: 'Delete Unit',
            confirmMessage: 'Are you sure? This action cannot be undone!',
            entries: 20,
            entriesOptions: [20, 40, 60, 80, 100]
        }
    )

    unitsTable.addEventListener('add.mdb.tableEditor', e => {
            console.log(e.row)
            const unit = {
                name: e.row.unit_name,
                description: e.row.description
            }   
            fetch(`http://${ipAddress}:${port}/unit/add`, {
                method: 'post',
                body: JSON.stringify(unit),
                headers: new Headers({
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                })
            })
            .then(response => response.json())
            .then((unit) => {
                console.log(unit.id)
                e.row.id = unit.id
            })
    })