Dash datatable not working after updating to Dash 1.0.0

I had a dash app working with an old version but now is not working properly since I updated to Dash 1.0.0

The problem seems to be with the datatable. It is no longer displaying data nor is editable. I’m struggling to work out why because it seems to work when I am debugging it in pycharm by stepping through each line.

But when I run the app the table doesn’t display anything. Any ideas why it is no longer working? or what more info do you need from me to diagnose the problem?

This is how I am initialising it:

import dash
import dash_html_components as html
import dash_table
import dash_core_components as dcc

def serve_layout():
    # layout function so that the data refreshes on page load
    layout = html.Div([
        dash_table.DataTable(
            id='sec_table',
            columns=[{'name': i, 'id': i} if i != 'Security Type'
                else {'name': i, 'id': i, 'presentation': 'dropdown'} for i in fields],
            data=[dict(**{field: '' for field in fields})],
            dropdown={
                'Security Type': {'options': [{'label': i, 'value': i} for i in ['OS', 'CO', 'PO']]}
            },
            editable=True,
            row_deletable=True,
            data_timestamp=0,
        ),

        # option payoff chart
        dcc.Graph(
            id='payoff_graph',
            style={'height': 700},
        )
    ])

    return layout


# declare global variables
fields = ['Security', 'Security Type', 'Unit Holding', 'Lot Size', 'Expiry Date', 'Market Price', 'Excercise Price',
          'Average Cost', 'Total Cost']

app = dash.Dash(__name__)
app.layout = serve_layout

# callback function to display row data on table
@app.callback(
    dash.dependencies.Output('sec_table', 'data'),
    [dash.dependencies.Input('sec_table', 'data_timestamp')],
    [dash.dependencies.State('sec_table', 'data'),
     dash.dependencies.State('sec_table', 'columns')]
)
def display_rows(edit_table_time, rows, columns):
    pass

# chart callback function breaks the app
@app.callback(
    dash.dependencies.Output('payoff_graph', 'figure'),
    [dash.dependencies.Input('sec_table', 'data')]
)
def update_chart(drop_down_time):
    return {}


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

Hi JayeDog!

Could you please provide a full Minimal Working Example? That is code that contains all what’s required to run the Dash app (from import to if __name__ == '__main__':), yet with only what is required to replicate your issue (i.e. no more than your DataTable). In your case, the code is quite a bit too minimal (-;

This would greatly help us help you, if we don’t have to type all the rest of the code.

thanks!

1 Like

ok i have cut out a lot of the code, but the problem should still reproduce. The original update_chart callback function had a lot more inputs but I have reduced it to one and the problem still occurs. When I remove this function the datatable seems to work again. Please let me know what I need to fix.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd


def serve_layout():
    # layout function so that the data refreshes on page load

    # connect to database and store all portfolio holdings data in a dataframe
    df = pd.DataFrame(data={})

    # get list of unique portfolio codes
    portfolios = []
    prt_options = [dict(label=str(prt), value=str(prt)) for prt in portfolios]

    layout = html.Div([

        # Hidden div inside the app for use with arbitrary callback
        html.Div(id='hidden', style={'display': 'none'}),

        # store component to store the main df with all the data
        dcc.Store(id='df', data=df.to_dict('rows')),

        # store component to store the filtered dataframe
        dcc.Store(id='filtered_df', modified_timestamp=0),

        # App Heading
        html.Div([
            html.H1(
                children='Option Payoff Diagram',
                style={
                    'textAlign': 'center'
                }
            )
        ]),

        # Portfolio drop down box
        html.Div([
            html.Label('Select Portfolio:'),
            dcc.Dropdown(
                id='prt-dropdown',
                options=prt_options
            )

        ], style={'display': 'table-cell', 'width': '25%'}),

        # Issuer drop down box
        html.Div([
            html.Label('Select Issuer'),
            dcc.Dropdown(
                id='issuer-dropdown'
            )
        ], style={'display': 'table-cell', 'width': '25%'}),


        html.Div([

            # dash table
            html.Div([
                dash_table.DataTable(
                    id='sec_table',
                    columns=[{'name': i, 'id': i} if i != 'Security Type'
                        else {'name': i, 'id': i, 'presentation': 'dropdown'} for i in fields],
                    dropdown={
                        'Security Type': {'options': [{'label': i, 'value': i} for i in ['OS', 'CO', 'PO']]}
                    },
                    editable=True,
                    row_deletable=True,
                    data_timestamp=0,
                )
            ], style={'width': '50%', 'float': 'left', 'margin-top': '60'}),

            # option payoff chart
            html.Div([
                dcc.Graph(
                    id='payoff_graph',
                    style={
                        'height': 700
                    },
                )
            ], style={'width': '50%', 'float': 'right'})

        ]),

        # add security button
        html.Button('Add Security', id='add_rows_button', n_clicks_timestamp=0)

    ])

    return layout


# declare global variables
fields = ['Security', 'Security Type', 'Unit Holding', 'Lot Size', 'Expiry Date', 'Market Price', 'Excercise Price',
          'Average Cost', 'Total Cost']

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = serve_layout

if __name__ == '__main__':
    app.run_server(debug=True, port=8080, host='192.168.162.91')

Great, thanks for posting your code!

Could you please enclose it with: ```python (then a new line) on top and ``` at the bottom, so it is formatted correctly in your message?

Beside this, I’m still quite sure there is possibility to prune your code to make it minimal (it takes time, I know…): if your question is about datatable only, you could, e.g., get rid of callbacks. Plus you don’t need some html.Div, the dcc.Store, etc.

1 Like

thanks ok I’ve cut out huge chunks of it including the callbacks. Now when I run it I still get an error on the browser page which says “Cannot read property ‘forEach’ of null”. I’m a bit confused I thought the datatable was editable if I removed some of my callback functions.

Congrat’s you did a good job: your code is now more “digestible”!

I have tried to run is, unfortunately, I a am getting following error:

$ python3 jaedog.py
Traceback (most recent call last):
  File "jaedog.py", line 1, in <module>
    import dash
  File "/home/ebosi/sandbox/datatable/venv_1.0/lib/python3.6/site-packages/dash/__init__.py", line 1, in <module>
    from .dash import Dash, no_update  # noqa: F401
  File "/home/ebosi/sandbox/datatable/venv_1.0/lib/python3.6/site-packages/dash/dash.py", line 13, in <module>
    import logging
  File "/usr/lib/python3.6/logging/__init__.py", line 28, in <module>
    from string import Template
  File "/home/ebosi/sandbox/string.py", line 1, in <module>
    import pandas as pd
  File "/home/ebosi/sandbox/datatable/venv_1.0/lib/python3.6/site-packages/pandas/__init__.py", line 13, in <module>
    __import__(dependency)
  File "/home/ebosi/sandbox/datatable/venv_1.0/lib/python3.6/site-packages/numpy/__init__.py", line 187, in <module>
    from .testing import Tester
  File "/home/ebosi/sandbox/datatable/venv_1.0/lib/python3.6/site-packages/numpy/testing/__init__.py", line 10, in <module>
    from unittest import TestCase
  File "/usr/lib/python3.6/unittest/__init__.py", line 59, in <module>
    from .case import (TestCase, FunctionTestCase, SkipTest, skip, skipIf,
  File "/usr/lib/python3.6/unittest/case.py", line 278, in <module>
    class _CapturingHandler(logging.Handler):
AttributeError: module 'logging' has no attribute 'Handler'

Could you please let me know which packages (and what version) you are using?

im just using the packages that I am importing as per above

import dash v1.0.0
import dash_core_components as dcc v.1.0.0
import dash_html_components as html v.1.0.0
import dash_table v.4.0.0
import pandas as pd 0.23.0

Thanks, I’ve managed to run you app locally.

Tell me if I’m wrong, but I think your code could be streamlined to the following — is that correct?

import dash
import dash_html_components as html
import dash_table

def serve_layout():
    # layout function so that the data refreshes on page load
    layout = html.Div([
        dash_table.DataTable(
            id='sec_table',
            columns=[{'name': i, 'id': i} if i != 'Security Type'
                else {'name': i, 'id': i, 'presentation': 'dropdown'} for i in fields],
            dropdown={
                'Security Type': {'options': [{'label': i, 'value': i} for i in ['OS', 'CO', 'PO']]}
            },
            editable=True,
            row_deletable=True,
            data_timestamp=0,
        )
    ])

    return layout


# declare global variables
fields = ['Security', 'Security Type', 'Unit Holding', 'Lot Size', 'Expiry Date', 'Market Price', 'Excercise Price',
          'Average Cost', 'Total Cost']

app = dash.Dash(__name__)
app.layout = serve_layout

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

ok it seems to work, i’ll try to add the callback functions back and different components one at a time to see what is causing the error

ok I have edited the original code to include just the chart and datatable. I’ve added 2 dummy callback functions which recreates the problem I have. Whenever I add the 2nd callback function with the chart as the output the app gives errors and the datatable is no longer editable.

I get " Cannot read property ‘forEach’ of null "

Appreciate any help I can get on this.