Dynamic "multi page" data table not returning anything

Hi all,
Excited to see the tables be officially released. It’s been a pain in the butt updating my code though.

Right now there are only two layouts:

  • The home page is a list of links that go to URLs to define a filter on a data table
  • The program page displays the table based on the URL

The main layout is:

app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])

The callback is:

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    print("pathname is")
    print(pathname)
    if pathname is not None:
        program = pathname[1:]
        print("program is")
        print(program)
    if pathname=='' or pathname=='/' or pathname is None:
        print("returning home page")
        return program_list_layout
    else:
        print("returning program page")
        return program_layout(program)

The function “program_list_layout” returns fine. that works.

The function program_layout(program) is what I’m having trouble with. It SHOULD return some buttons and a table. Here’s the function:

def program_layout(program): 
    
    rows,columns = updateRowsforDash(program)
    return [

    html.Button('Submit', id='button',n_clicks=0,n_clicks_timestamp =0),
    html.Button('Refresh', id='button2',n_clicks_timestamp =0),
    html.Button('Add Row', id='addrow',n_clicks_timestamp =0),
    html.Button('Test Button', id='button3',n_clicks_timestamp =0),
    dt.DataTable(
    columns=columns,
    data = rows,
    id='datatable')
    ]

Things that confuse me:

  1. The function runs but displays nothing
  2. There are no errors in the debugger
  3. If I remove the dt.DataTable component the buttons display fine
  4. If I make it a single-page app it runs fine. Only when I make it a multi-page app does this happen

What do? Thanks in advance. Sorry I’m a self-taught programmer, feel free to berate me.

First set app.run_server(debug=True), then you can open the browser dev tools (F12 on chrome). On the console there should be an error, can you report it ? Thanks

1 Like

Sure thing, the console debugger had no error, but chrome reports this:

Why dash_table was not found…no idea.

dash_renderer.min.js:27 Uncaught (in promise) Error: dash_table was not found.
    at Object.resolve (dash_renderer.min.js:27)
    at p (dash_renderer.min.js:27)
    at Array.map (<anonymous>)
    at p (dash_renderer.min.js:27)
    at Array.map (<anonymous>)
    at p (dash_renderer.min.js:27)
    at e.value (dash_renderer.min.js:27)
    at p._renderValidatedComponentWithoutOwnerOrContext (react-dom.min.js:13)
    at p._renderValidatedComponent (react-dom.min.js:13)
    at p._updateRenderedComponent (react-dom.min.js:13)
resolve @ dash_renderer.min.js:27
p @ dash_renderer.min.js:27
p @ dash_renderer.min.js:27
p @ dash_renderer.min.js:27
value @ dash_renderer.min.js:27
_renderValidatedComponentWithoutOwnerOrContext @ react-dom.min.js:13
_renderValidatedComponent @ react-dom.min.js:13
_updateRenderedComponent @ react-dom.min.js:13
_performComponentUpdate @ react-dom.min.js:13
updateComponent @ react-dom.min.js:13
receiveComponent @ react-dom.min.js:13
receiveComponent @ react-dom.min.js:14
updateChildren @ react-dom.min.js:13
_reconcilerUpdateChildren @ react-dom.min.js:14
_updateChildren @ react-dom.min.js:14
updateChildren @ react-dom.min.js:14
_updateDOMChildren @ react-dom.min.js:13
updateComponent @ react-dom.min.js:13
receiveComponent @ react-dom.min.js:13
receiveComponent @ react-dom.min.js:14
_updateRenderedComponent @ react-dom.min.js:13
_performComponentUpdate @ react-dom.min.js:13
updateComponent @ react-dom.min.js:13
receiveComponent @ react-dom.min.js:13
receiveComponent @ react-dom.min.js:14
_updateRenderedComponent @ react-dom.min.js:13
_performComponentUpdate @ react-dom.min.js:13
updateComponent @ react-dom.min.js:13
performUpdateIfNecessary @ react-dom.min.js:13
performUpdateIfNecessary @ react-dom.min.js:14
s @ react-dom.min.js:14
perform @ react-dom.min.js:15
perform @ react-dom.min.js:15
perform @ react-dom.min.js:14
T @ react-dom.min.js:14
closeAll @ react-dom.min.js:15
perform @ react-dom.min.js:15
batchedUpdates @ react-dom.min.js:14
u @ react-dom.min.js:14
r @ react-dom.min.js:14
enqueueSetState @ react-dom.min.js:14
r.setState @ react.min.js:12
i.handleChange @ dash_renderer.min.js:18
p @ dash_renderer.min.js:12
(anonymous) @ dash_renderer.min.js:18
dispatch @ dash_renderer.min.js:12
(anonymous) @ dash_renderer.min.js:1
Promise.then (async)
(anonymous) @ dash_renderer.min.js:1
Promise.then (async)
b @ dash_renderer.min.js:1
(anonymous) @ dash_renderer.min.js:1
(anonymous) @ dash_renderer.min.js:18
setProps @ dash_renderer.min.js:27
(anonymous) @ dash_core_components.min.js:33
value @ dash_core_components.min.js:33
onClick @ dash_core_components.min.js:33
r @ react-dom.min.js:14
a @ react-dom.min.js:12
s @ react-dom.min.js:12
f @ react-dom.min.js:12
m @ react-dom.min.js:12
r @ react-dom.min.js:15
processEventQueue @ react-dom.min.js:12
r @ react-dom.min.js:14
handleTopLevel @ react-dom.min.js:14
i @ react-dom.min.js:14
perform @ react-dom.min.js:15
batchedUpdates @ react-dom.min.js:14
i @ react-dom.min.js:14
dispatchEvent @ react-dom.min.js:14

Can you list the versions you are using for dash, dash-renderer, dash-table ?

It’s probably because you did not include the table in the initial layout so dash doesn’t serve the dash_table bundle. I changed that behavior not long ago, so if you update to the latest dash it should fix it.

pip install dash==0.30.0

2 Likes

Oh snap my packages were really out of date.
It works now, thank you so much!