🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

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!