clientside callback to determine which cell of a DataTable was changed

changed_cell.py

# from Adam's video https://www.youtube.com/watch?v=2pWwSm6X24o&list=PLh3I780jNsiQObs1CGDIB1S_I7--M40yC


# data is stored in a dcc.Store(id="changed-cell")



app.clientside_callback(
    """
    function (input,oldinput) {
        if (oldinput != null) {
            if(JSON.stringify(input) != JSON.stringify(oldinput)) {
                for (i in Object.keys(input)) {
                    newArray = Object.values(input[i])
                    oldArray = Object.values(oldinput[i])
                    if (JSON.stringify(newArray) != JSON.stringify(oldArray)) {
                        entNew = Object.entries(input[i])
                        entOld = Object.entries(oldinput[i])
                        for (const j in entNew) {
                            if (entNew[j][1] != entOld[j][1]) {
                                changeRef = [i, entNew[j][0]] 
                                break        
                            }
                        }
                    }
                }
            }
            return changeRef
        }
    }    
    """,
    Output('changed-cell', 'data'),
    Input('our-table', 'data'),
    State('our-table', 'data_previous')
)

See also this dash community forum post for two more examples: https://community.plotly.com/t/changing-the-database-table-with-editable-dash-datatable-functionality/68986/10?u=annmariew