Display tables in Dash

Dash Python
13

To summarize the solutions that are available right now:

Solution 1 - Native HTML Table

This renders a table using native HTML elements, that is: Table, Tr, Th. See the generate_table function in https://plot.ly/dash/getting-started for a little recipe that converts a dataframe to standard HTML table. You can modify the style of this table with CSS.

Directly inside the layout, this would look like:

app.layout = html.Div([
    generate_table(df)
])

Or, inside a callback:

app.layout = html.Div([
    dcc.Dropdown(id='my-dropdown'), # fill this in
    html.Div(id='table-container')
])

@app.callback(Output('table-container', 'children'), [Input('my-dropdown', 'value')])
def update_table(value):
    dff = df[df['some-column'] == value] # update with your own logic
    return generate_table(dff)

Solution 2 - Plotly Table

The Plotly-Python library has a FigureFactory function that generates a table using the underlying heatmap trace type. The docs for this are here: https://plot.ly/python/table/

You would use this in Dash through the Graph component, so:

import plotly.figure_factory as ff

figure = ff.create_table(...) # see docs https://plot.ly/python/table/
app.layout = html.Div([
    dcc.Graph(id='my-table', figure=figure)
])

or in a callback like:

app.layout = html.Div([
    [...]
    dcc.Dropdown(id='my-dropdown', [...]),
    dcc.Graph(id='my-table')
])

@app.callback(Output('my-table', 'figure'), [Input('my-dropdown', 'value')])
def update_table(value):
    dff = df[df['filter-column'] == value] # replace with your own data processing code
    new_table_figure = ff.create_table(dff)
    return new_table_figure

Solution 3 - Wait for new official plotly.js table trace type

The figure_factory in Solution 2 creates a table-like graph by using an underlying heatmap. The plotly.js team is adding an official table “chart type”, see https://github.com/plotly/plotly.js/pull/1834. This table component will expose all of the styling properties directly (instead of through CSS) which will make it easier to style.

Solution 4 - Build Your Own (or contract us to)

If you need more table features that aren’t available above, you can either build your own dash component or contract out our advanced development team.

11 Likes