Cannot read property 'fantasy-land/map' of undefined Dash DataTable Updating table with dropdowns

Dash Python
1

I am referencing the sample code snippet that @chriddyp posted here Dash DataTable - Updating Rows with Dropdowns and the discussions that happened on the linked posts

Reproducible example

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

from dash.dependencies import Input, Output, State


def create_dropdown_list(df, column):
    dd = df.loc[:, [column]].drop_duplicates().reset_index(drop=True)
    dd['label'] = dd[column]
    dd = dd.rename(columns={column:'value'}).to_dict(orient='records')
    return dd


city_temp = pd.DataFrame({'City':['Montreal','New York','San Francisco'], 
                          'Temperature':[68,83,66]})


server = flask.Flask(__name__)
app = dash.Dash(server=server, )

dropdown_list = create_dropdown_list(city_temp, 'City')

app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown',
        options=dropdown_list, # which looks like [{'label': 'Montreal', 'value': 'Montreal'}, {'label': 'New York', 'value': 'New York'}, {'label': 'San Francisco', 'value': 'San Francisco'}]
        value = 'Montreal'
        ),
    html.H4(children='My table'),
    dt.DataTable(id='my-datatable')
])


@app.callback(Output('my-datatable', 'rows'), [Input('my-dropdown', 'value')])
def update_rows(selected_value):
    city_temp_sub = city_temp[city_temp.City == selected_value].reset_index(drop=True)
    return city_temp_sub.to_dict('records')


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

if __name__ == "__main__":
    app.run_server()

I get the “Error loading dependencies” on the browser
And on the console I get the error as “TypeError: Cannot read property ‘fantasy-land/map’ of undefined”

Can someone help ?

Thank you

Anuj

2

This is similar to https://github.com/plotly/dash-core-components/issues/260

3

I had this problem before, I think my solution was to give empty rows on the DataTable.

dt.DataTable(rows=[{}], id='my-table')
1 Like
4

This worked for me. Thanks!