Dash DataTable - Issue Rendering Multiple DataTables

Dash Python
1

@filmcup86 that simple code works, but if I modify it to this one I get the Error loading dependencies error:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import json
import pandas as pd

print(dcc.__version__)  # 0.6.0 or above is required

app = dash.Dash()

DF_SIMPLE = pd.DataFrame({
    'x': ['A', 'B', 'C', 'D', 'E', 'F'],
    'y': [4, 3, 1, 2, 3, 6],
    'z': ['a', 'b', 'c', 'a', 'b', 'c']
})

# Since we're adding callbacks to elements that don't exist in the app.layout,
# Dash will raise an exception to warn us that we might be
# doing something wrong.
# In this case, we're adding the elements through a callback, so we can ignore
# the exception.
app.config.supress_callback_exceptions = True
app.scripts.config.serve_locally = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
    html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'}),
    html.Div([
        html.H4('Editable DataTable'),
        dt.DataTable(
            rows=DF_SIMPLE.to_dict('records'),

            # optional - sets the order of columns
            columns=sorted(DF_SIMPLE.columns),

            editable=True,

            id='editable-table'
        )
    ])
])


app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

Do you have an idea of what this simpler code may be doing wrong?

2

Issue here should help: dcc.Location Error Loading Dependencies

Commenting out #dcc.Location and the code runs fine.

2 Likes
3

Could you try upgrading dash-core-components? I created an issue about this here: `dcc.Location` without an `Output` causes the app to fail · Issue #145 · plotly/dash-core-components · GitHub and some folks weren’t able to replicate it.

4

This works for me now with or without commented out dcc.Location! No longer an issue on my end. dcc.version==0.17.0

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd

print(dcc.__version__)

app = dash.Dash()

DF_SIMPLE = pd.DataFrame({
'x': ['A', 'B', 'C', 'D', 'E', 'F'],
'y': [4, 3, 1, 2, 3, 6],
'z': ['a', 'b', 'c', 'a', 'b', 'c']
})


app.config.supress_callback_exceptions = True
app.scripts.config.serve_locally = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
    html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'}),
    html.Div(id='editable-table', children=[
        html.H4('Editable DataTable'),
        dt.DataTable(
            rows=DF_SIMPLE.to_dict('records'),
            # optional - sets the order of columns
            columns=sorted(DF_SIMPLE.columns),
            editable=True,
        )
    ])
])


app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

I didn’t really need the location so I dropped that off, and now it works, thanks! Oh also tried updating dash_core_components to 0.17.0 and all works now :slight_smile: Thanks @chriddyp @emunson

1 Like