Dash-table not refreshed in browser when adding table-rows using clientside_callback

[kkollsga]

Hi,
I'm trying to add rows using clientside_callback. I'm encountering 2 issues:

1. After appending the new row to the data object, the table is not refreshed with new rows. If I update cell values of already plotted cells, the display updates as expected, and if I delete a row the new rows appear. Is there a way to manually trigger a full table refresh from the clientside?
2. n_clicks is not reset to 0 after the clientside event has been triggered. You can see that by selecting different cells in the table. Every time you do that after having clicked new row, additional rows are inserted to the data object.

Thanks =)

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State

import pandas as pd
magic = pd.DataFrame(data=[[1,2,3,4],[1,2,3,4]],columns=["abra","ka","da","bra"])

app = dash.Dash()

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in magic.columns],
        data=magic.to_dict('records'),
        editable=True,
        row_deletable=True
    ),
    html.Button('Add Row', id='editing-rows-button', n_clicks=0)
])

app.clientside_callback(
    """
    function (selected,n_clicks,data,columns) {
        if (n_clicks > 0) {
            newRow = {}
            for (i in columns) {
                newRow[columns[i]['name']] = null
            }
            data.push(newRow)
        }
        console.log(n_clicks)
        console.log(data)
        return data
    }
    """,
    Output('table', 'data'),
    [Input('table', 'active_cell'), Input('editing-rows-button', 'n_clicks')],
    [State('table', 'data'), State('table', 'columns')]
)

if __name__ == '__main__':
    app.run_server(debug=True)

[alexcjohnson]

1. It looks like we're doing an identity check on the data prop to determine whether it changed - so just mutating the input data will not tell the table that there are new rows present. You can get around this by calling .slice() to make a new copy of data. I don't think we'll want to change that behavior because it's important for performance. Also it doesn't apply to server-side callbacks, only client-side. So we'll take this as a documentation issue specifically for client-side callbacks.

2. That's the intended behavior - n_clicks and similar props never reset until you reload the page or recreate the component. Use callback_context.triggered to determine which input caused the callback.

Working example:

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State

import pandas as pd
magic = pd.DataFrame(
    data=[[1, 2, 3, 4], [1, 2, 3, 4]],
    columns=["abra", "ka", "da", "bra"]
)

app = dash.Dash()

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in magic.columns],
        data=magic.to_dict('records'),
        editable=True,
        row_deletable=True
    ),
    html.Button('Add Row', id='editing-rows-button', n_clicks=0)
])

app.clientside_callback(
    """
    function (selected,n_clicks,data,columns) {
        if (dash_clientside.callback_context.triggered.some(
            ti => ti.prop_id === 'editing-rows-button.n_clicks'
        )) {
            data = data.slice();
            newRow = {}
            for (i in columns) {
                newRow[columns[i]['name']] = null
            }
            data.push(newRow)
        }
        console.log(dash_clientside.callback_context);
        console.log(n_clicks)
        console.log(data)
        return data
    }
    """,
    Output('table', 'data'),
    [Input('table', 'active_cell'), Input('editing-rows-button', 'n_clicks')],
    [State('table', 'data'), State('table', 'columns')]
)

if __name__ == '__main__':
    app.run_server(debug=True)

[kkollsga]

Thanks for the fast response @alexcjohnson =) The .slice() workaround is excellent. Exactly what I was looking for =) I'm getting the error message: "Cannot read property 'triggered' of undefined". Do I need to update dash? I'm at version 1.12.0

[alexcjohnson]

Oh sorry! I forgot clientside callback context hasn't been released yet. plotly/dash#1240
That will be in 1.13, should be out within the next week or so.

In the meantime, assuming you do need active_cell to be an Input rather than State, the only thing I can think of is to stash the previous value of n_clicks on some global var and checking whether that changed vs. the previous time the callback was invoked.

[kkollsga]

Thanks a lot, I should have thought of that myself! I'll throw it in a global var, and wait for 1.13 =)

[pdefelice]

For me this solution unfortunately is not working. I try to implement an UNDO-action for user changes in the table via a Clientside-Callback by clicking a button. The changes get stored in a dcc store element and retrieved by the callback so that the callback can take the last change and undo it. The Callback actually works but the table does not refresh. The user needs to modify another cell in order to make the UNDO on the last modified cell appear. Also when selecting the last modified cell the original value (before user change) appears, which confirms that the callback is working. How can i trigger a refresh of the table manually?

Here is my Callback:
dash.clientside_callback( """ function(dummy_input_to_prevent_dash_bug, n_clicks, tableData, modificationHistoryDict) { if ('dash_datatable' in modificationHistoryDict) { var tableModificationList = modificationHistoryDict['dash_datatable']; if (tableModificationList.length > 0) { var newTableData = tableData.slice(); var lastModifiedCell = tableModificationList[tableModificationList.length - 1] newTableData[lastModifiedCell.row][lastModifiedCell.column] = lastModifiedCell.original; tableModificationList.pop(); modificationHistoryDict['dash_datatable'] = tableModificationList; } return [newTableData, modificationHistoryDict]; } else { return [tableData, modificationHistoryDict]; } } """, dash.Output(f"dash_datatable", "data", allow_duplicate=True), dash.Output("dcc_store_undo_action", "data", allow_duplicate=True), dash.Input(f"dash_datatable", "id"), # This input is not needed but dash throws an error if all those callbacks created inside of the loop have the very same input. dash.Input('undo_button', 'n_clicks'), dash.State(f"dash_datatable", "data"), dash.State('dcc_store_undo_action', "data"), prevent_initial_call=True, )

Does anyone know how to format the code better? I added an image because the formatting seems very illegible and poor to me.

[kkollsga]

@pdefelice From what I'm reading, the code looks correct. I don't understand what issue make it necessary to call the dash_datatable.id as an input event. Perhaps take that out and print the error code? Could be that there are some infinite loops or something in your code. I see you are using duplicate outputs to dash_datatable.data so this might be causing you issues. Personally I haven't used this functionality a lot.

If there are no changes return [dash_clientside.no_update, dash_clientside.no_update] instead of [tableData, modificationHistoryDict]. That makes sure no updates are made. To make your code a little easier to QC you could replace your "var newTableData = tableData.slice();" with "var newTableData = newTableData.slice();" so its the last thing you do before returning it.

Also to make you code a little more readable you could simplify your history code, by making your variable_names shorter =)
Something like this:
dt_history = history['dt']
changed_cell = dt_history[dt_history.length - 1]

You don't need to use "var" every time you create new variables. In modern javascript, variables are declared automatically.