updating a datatable with editable=True

[speedboattoyota]

I'm trying to update a datatable from a dropdown menu like the 2nd example here:
https://dash.plot.ly/dash-core-components/store

It works fine if the editable property isn't set. However if I set this to true and then edit the table it will no longer update when the user makes a selection from the drop down menu. Is there something wrong with my code?

I've debugged the callback function and can confirm it still fires AFTER a user has edited the table but the table will no longer update. It remains frozen with the edited values unless the page is refreshed in the browser.

import collections
import dash
import pandas as pd

from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate

import dash_html_components as html
import dash_core_components as dcc
import dash_table

app = dash.Dash(__name__)

df = pd.read_csv(
    'https://raw.githubusercontent.com/'
    'plotly/datasets/master/gapminderDataFiveYear.csv')

countries = set(df['country'])


app.layout = html.Div([
    dcc.Store(id='memory-output'),
    dcc.Dropdown(id='memory-countries', options=[
        {'value': x, 'label': x} for x in countries
    ], multi=True, value=['Canada', 'United States']),
    dcc.Dropdown(id='memory-field', options=[
        {'value': 'lifeExp', 'label': 'Life expectancy'},
        {'value': 'gdpPercap', 'label': 'GDP per capita'},
    ], value='lifeExp'),
    html.Div([
        dcc.Graph(id='memory-graph'),
        dash_table.DataTable(
            id='memory-table',
            columns=[{'name': i, 'id': i} for i in df.columns],
            **editable=True**
        ),
    ])
])


@app.callback(Output('memory-output', 'data'),
              [Input('memory-countries', 'value')])
def filter_countries(countries_selected):
    if not countries_selected:
        # Return all the rows on initial load/no country selected.
        return df.to_dict('rows')

    filtered = df.query('country in @countries_selected')

    return filtered.to_dict('rows')


@app.callback(Output('memory-table', 'data'),
              [Input('memory-output', 'data')])
def on_data_set_table(data):
    if data is None:
        raise PreventUpdate

    return data

[gwdekker]

I am seeing very similar behavior. In my use case I have a database query that updates a dcc.Store element, and a callback to update the table based on change of the values in the Store. The table has sorting enabled, and all works fine. When I add row_deletable=True, the front-end updating breaks:

• The dcc.Store element still gets updated when getting new data from the database
• The callback to update the table fires, and reports it sends updated data to the Table component
• The table on screen does not update.
• When refreshing the page, the table does update to the right values.

[Marc-Andre-Rivet]

@gwdekker @JCYTang Thanks for reporting this issue. Can also reproduce this behavior. As long as the table has not been edited it seems to update fine but once it's been modified it no longer gets updated. Investigating.

[Marc-Andre-Rivet]

This issue is caused by a combination of 3 factors:

• the dash-renderer is not assigning a setProps function to the table for this Dash app because no one is listening to the table's properties
• the table is special in the sense that it is a fully functioning standalone React Component -- when no setProps is provided, it will loopback on itself and assign setProps to its own internal state
• this behavior is only visible when the table (or a column) is editable -- as this is the only scenario in which the table will call setProps with the prop data

The "culprit" is located here

dash-table/src/dash-table/components/Table/index.tsx

Line 82 in d955afb

} = R.merge(this.props, this.state) as (PropsWithDefaults & StandaloneState);

as it assigns the internal data over the Dash generated data prop.

At first glance, I think the appropriate solution would be for the renderer to always provide a setProps function to components even if they are not being listened to. The renderer already has logic responsible for only returning props that are necessary for processing, if I remember well.

As a temporary fix, adding any arbitrary callback taking a table property as input would fix the issue.

[gwdekker]

Thanks for the quick feedback! I just tested the proposed temporary fix, and this works perfectly.

[speedboattoyota]

thanks i also included a dummy callback taking a table property as input and now it works!

[Marc-Andre-Rivet]

Dash 0.40 will include plotly/dash-renderer#126 and that will remove the need for dummy callbacks and such in a variety of situations, including ☝️

[Marc-Andre-Rivet]

@gwdekker @JCYTang Closing as fixed in Dash 0.40 -- please open a new issue if you run into this again!

[yusufm3]

I am a little new to dash and facing the issue as posted above,where once the table has been updated the table freezes. Can someone please show me an example of what the dummy callback for the problem looks like.

[Sangavi-123]

how to do a dummy callback? I am very new to programming. I am facing a similar issue. I can see the drop down menu. the call back is triggered. But the graph layout is empty. Help will be much appreciated

[aussetg]

Still running in this ( or similar ) issue: I have a callback to change a column when the row is edited. When I edit the table nothing happens but if I click again on the row ( to edit it ) the changes are suddenly displayed.