Unable to load table on multipage dash

I am able to display a dash table using https://github.com/plotly/dash-table-experiments/blob/master/usage.py.

Now, I want to display the same table in a multi page dash app.

I started with https://github.com/plotly/dash-recipes/blob/master/urls/multi_page.py and added the necessary code to display a table.

imports

import dash_table_experiments as dt
import pandas as pd

load a dataframe

DF_GAPMINDER = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
)
DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER['year'] == 2007]
DF_GAPMINDER.loc[0:20]

add a table to a layout

dt.DataTable(
    rows=DF_GAPMINDER.to_dict('records'),
    selected_row_indices=[],
    id='datatable-gapminder'
),

I will get the following exception

Uncaught (in promise) Error: dash_table_experiments was not found.
    at Object.resolve (bundle.js?v=0.11.0:9)
    at s (bundle.js?v=0.11.0:9)
    at Array.map (<anonymous>)
    at s (bundle.js?v=0.11.0:9)
    at Array.map (<anonymous>)
    at s (bundle.js?v=0.11.0:9)
    at Array.map (<anonymous>)
    at s (bundle.js?v=0.11.0:9)
    at e.value (bundle.js?v=0.11.0:9)
    at p._renderValidatedComponentWithoutOwnerOrContext (react-dom@15.4.2.min.js?v=0.11.0:13)

This error was already discussed a several times.
Dash is designed to load all it’s dependencies according to the components on the first visible page.
If you want to use a table on another page than the first one, you have to add an empty hidden table on the first page.

html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'}),
2 Likes

I removed all my tables and added just your empty table to the first page and still get the same exception. Do you have working example?

The issue was last discussed 7 days ago (with code)

2 Likes

Cool! Table now works as expected. Thanks!

1 Like

In case anyone is wondering what the problem is, here is the explanation (with code to fix it):