Dash DataTable problem after upgrading to Dash 1.1.1

Dash Python
1

Hello,
I have a Dash app with DataTables that was working perfectly fine on Dash v0.43 but began to create errors after uploading do Dash 1.1.1.
The DataTables are updated every 5 mns through a callback. The code is alike:

layout = html.Div([
dcc.Graph(
id=‘example-graph’,
animate=True),
dt.DataTable(
id=‘data-table’,
columns=‘columns’,
data=‘data’,
style_table={‘overflowX’: ‘scroll’}),
dcc.Interval(
id=‘update’,
interval=5*6000,
n_intervals=0)
], className=‘row’)

@app.callback(
                [Output('example-graph', 'figure')
                    ,Output('data-table', 'columns')
                   ,Output('data-table', 'data')
                ]
                ,[Input('update', 'n_intervals')])
def update_browser(n):
    chartsql = '''
                   '''
    chartdf = pd.read_sql(chartsql, connectDB(os.getenv('WRAPPER')))

trace0 = go.Scatter(
        )
trace1 = go.Scatter(
        )
trace2 = go.Scatter(
        )
trace3 = go.Scatter(
        )

dataGraph = [trace0, trace1, trace2, trace3]

layout = go.Layout(
    xaxis=,
    yaxis=,
    yaxis2=
)

figure = go.Figure(
    data=dataGraph,
    layout=layout
)

tablesql = '''
           '''

tabledf = pd.read_sql(tablesql, connectDB(os.getenv('WRAPPER')))
tabledf = tabledf.iloc[:, 1:]
columns = [{'name': i, 'id': i} for i in tabledf.columns]
data = tabledf.to_dict('rows')

return figure, columns, data

with version 0.43 the table was correctly updated but with version 1.1.1 i get this error:
33
Seems that the app doesn’t recognize the list that i send to the attribute columns through the callback.
Same problems appear with the data attribute…
I ve read the migration documentation but couldn’t find the reason of this problem.
Could you help me here?
Thanks in advance!

2

This is a string, not an array.

3

This part is supposed to be updated by the callback below. As I said it works perfectly well with dash 0.43.0 not with 1.1.1:
@app.callback(
[Output(‘example-graph’, ‘figure’)
,Output(‘data-table’, ‘columns’)
,Output(‘data-table’, ‘data’)
]
,[Input(‘update’, ‘n_intervals’)])
def update_browser(n):
chartsql = ‘’’
‘’’
chartdf = pd.read_sql(chartsql, connectDB(os.getenv(‘WRAPPER’)))

trace0 = go.Scatter(
)
trace1 = go.Scatter(
)
trace2 = go.Scatter(
)
trace3 = go.Scatter(
)

dataGraph = [trace0, trace1, trace2, trace3]

layout = go.Layout(
xaxis=,
yaxis=,
yaxis2=
)

figure = go.Figure(
data=dataGraph,
layout=layout
)

tablesql = ‘’’
‘’’

tabledf = pd.read_sql(tablesql, connectDB(os.getenv(‘WRAPPER’)))
tabledf = tabledf.iloc[:, 1:]
columns = [{‘name’: i, ‘id’: i} for i in tabledf.columns]
data = tabledf.to_dict(‘rows’)

return figure, columns, data

4

I understand, but on the initial render, it’s receiving a bad value - a string, not an array (which is what the error message is saying). In previous versions, we didn’t raise any issues if you supplied improper data types, we would either silently fail or silently accept the issue.

5

Oh i see, thanks @chriddyp. So how should i modify the code to fix the issue. I ve tried different things without success alas…

6

Never mind i found the solution. I replaced by the below code and somehow it worked.
Thanks for your help. I alway enjoy very much using your product!

dt.DataTable(
id=‘open-pnl-table’,
columns=[{‘name’: ‘name’, ‘id’: ‘id’}],
data=[{}],
style_table={‘overflowX’: ‘scroll’},
locale_format={‘separate_4digits’: True}),

7

Checkout the Dash FAQ page (https://dash.plot.ly/faqs)…there is a discussion on How do I determine which Input has changed?. In this discussion w/ example, there is a global variable that is only accessible within callbacks that you can use to determine the state of your callback parameters.

Specfically, ctx = dash.callback_context.

Explore this ctx variable and you can see how you can use it to determine if your inputs/states are populated before passing data back to `columns’.

In another FAQ or forum thread, there are discussions on the no_update return value that can be used in lieu of actual values when you want to return from a callback w/o updating the component. if you have more than one output in a callback, you will need a no_update for each (or whatever value you want to return for each output).

8

@flyingcujo thanks for your advices. I will try!
And about my above problem i succeeded to fix it yesterday with the below code:

        dt.DataTable(
            id='data-table',
            columns=[{'name': 'name', 'id': 'id'}],
            data=[{}],
            style_table={'overflowX': 'scroll'}),