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

Display tables in Dash

Hi!
I tried to split the app I’m working on into 2 pages using the URL support and it seems that the tables break down the app.
Did someone notice that before?
Below a code example :

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dtable
import pandas as pd
print(dcc.version) # 0.6.0 or above is required
app = dash.Dash()
app.config.supress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])
index_page = html.Div([
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=’/page-2’),
])
page_1_layout = html.Div([
html.H1(‘Page 1’),
dcc.Dropdown(
id=‘page-1-dropdown’,
options=[{‘label’: i, ‘value’: i} for i in [‘LA’, ‘NYC’, ‘MTL’]],
value=‘LA’
),
html.Div(id=‘page-1-content’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=’/page-2’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’),
])
@app.callback(dash.dependencies.Output(‘page-1-content’, ‘children’),
[dash.dependencies.Input(‘page-1-dropdown’, ‘value’)])
def page_1_dropdown(value):
return ‘You have selected “{}”’.format(value)
page_2_layout = html.Div([
html.H1(‘Page 2’),
dcc.RadioItems(
id=‘page-2-radios’,
options=[{‘label’: i, ‘value’: i} for i in [‘Orange’, ‘Blue’, ‘Red’]],
value=‘Orange’
),
dtable.DataTable(
rows=pd.DataFrame({‘a’:[1, 2], ‘b’:[3,4]}).to_dict(‘records’),
id=‘table’),
html.Div(id=‘page-2-content’),
html.Br(),
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’)
])
@app.callback(dash.dependencies.Output(‘page-2-content’, ‘children’),
[dash.dependencies.Input(‘page-2-radios’, ‘value’)])
def page_2_radios(value):
return ‘You have selected “{}”’.format(value)
@app.callback(dash.dependencies.Output(‘page-content’, ‘children’),
[dash.dependencies.Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/page-1’:
return page_1_layout
elif pathname == ‘/page-2’:
return page_2_layout
else:
return index_page
# You could also return a 404 “URL not found” page here
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css
})
if name == ‘main’:
app.run_server(debug=True)

Thanks! :grinning:

add empty hidden table here. something like
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
After that dash will be able to render other tables.

2 Likes

Hi Roman,
Tanks for the trick! It worked perfectly.
Julien

A post was split to a new topic: Dash DataTable - Unable to use more than 1 table

A post was split to a new topic: Dash DataTable - Disable Ability to Select All Rows

A post was split to a new topic: Multi-Index Tables in Dash

A post was split to a new topic: Dash DataTable - Change Direction of Column Headers

A post was split to a new topic: Dash DataTable - Updating the Number of Rows

A post was split to a new topic: Dash DataTable - Updating Rows with Dropdowns

A post was split to a new topic: Dash DataTable - Thousands Separator

A post was split to a new topic: Dash Table - Fill Remaining of Space

A post was split to a new topic: Dash DataTable - Using Callbacks

If you are working with JSON I would recommend to check out this tool. https://jsonformatter.org

A post was split to a new topic: Dash DataTable - Not working on heroku?

A post was split to a new topic: Dash DataTables - textwrap

A post was split to a new topic: Dash DataTable - Issue Rendering Multiple DataTables

A post was split to a new topic: Dash DataTable - Support for Click Events

A post was split to a new topic: Dash DataTable - Specify which columns should be editable

Thanks @roman , it worked :wink:

1 Like

A post was split to a new topic: Header and Cell Alignment in Plotly go.Table