Black Lives Matter. Please consider donating to Black Girls Code today.

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

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'], 

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

dropdown_list = create_dropdown_list(city_temp, 'City')

app.layout = html.Div([
        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'),

@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')

    'external_url': ''

if __name__ == "__main__":

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


This is similar to

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

This worked for me. Thanks!