This repository was archived by the owner on Aug 29, 2025. It is now read-only.
Repository navigation
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
updating a datatable with editable=True #386
Description
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
Activity
gwdekker commentedon Feb 27, 2019
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:
Marc-Andre-Rivet commentedon Feb 27, 2019
@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 commentedon Feb 27, 2019
This issue is caused by a combination of 3 factors:
dash-rendereris not assigning asetPropsfunction to the table for this Dash app because no one is listening to the table's propertiessetPropsis provided, it will loopback on itself and assignsetPropsto its own internal statesetPropswith the propdataThe "culprit" is located here
dash-table/src/dash-table/components/Table/index.tsx
Line 82 in d955afb
At first glance, I think the appropriate solution would be for the renderer to always provide a
setPropsfunction 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 commentedon Feb 27, 2019
Thanks for the quick feedback! I just tested the proposed temporary fix, and this works perfectly.
speedboattoyota commentedon Feb 28, 2019
thanks i also included a dummy callback taking a table property as input and now it works!
Marc-Andre-Rivet commentedon Mar 19, 2019
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 commentedon Mar 26, 2019
@gwdekker @JCYTang Closing as fixed in Dash 0.40 -- please open a new issue if you run into this again!
yusufm3 commentedon May 2, 2019
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 commentedon Jul 21, 2019
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 commentedon Jul 30, 2019
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.