My Dash tutorial looks different than the one in the documentation. Should they?

Question

I'm an experienced backend engineer, but I'm new to browser-based GUI design (HTML, CSS, etc.). I needed to build a dashboard and found Dash. I just started working on these examples.

When I run the example, my results are completely different than what is shown in the documentation. The documentation states that there may be minor differences, but my differences are not minor at all. For example, for one of the earlier table examples, my table had no borders, background color, etc. It seems to me that no styles are applied. I'd like to know if the results I'm getting are as expected, or if there's something wrong with it.

This is an example. This example is from the "Reusable Components" section of the layout tutorial section. In the documentation, the first representation looks like this:

But what I get is this:

The sample code is as follows:

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html
import pandas as pd

df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')


def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


app = Dash(__name__)

app.layout = html.Div([
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])

if __name__ == '__main__':
    app.run_server(debug=True)

I looked at the developer tools console in Chrome and didn't see any errors indicating that the CSS file could not be loaded, etc. I'm working in PyCharm on Mac. I copy/pasted the text as-is into an empty "app.py" file and ran the file.

Are my results wrong, or just my expectations flawed? If I should be getting better looking results, what might I be missing?

If this is what I'm supposed to get, how should I find and apply a good set of styles to make my table look good? Do I have to learn table styles one set at a time, or is there a better way? Is there some sort of "plugin" concept in HTML/CSS that grabs and inserts a set of styles for a specific purpose, like a stylesheet? If so, where should I look for such a "plugin"? I knew the frontend was using React, but was so new to this stuff that the knowledge didn't really help me.

TIA Looking for help!

Answer 1

I encourage you to use the Dash Bootstrap component to easily style your table, I used this library to rewrite your example and get the output you want:

from dash import Dash, html, dcc
import pandas as pd
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')

table_header = [
    html.Thead(html.Tr([html.Th(col) for col in df.columns]))
]


table_body = [html.Tbody([
                html.Tr([
                    html.Td(df.iloc[i][col]) for col in df.columns
                ]) for i in range(len(df))
              ])
             ]


table = dbc.Table(
    table_header table_body,
    bordered=True,
    dark=True,
    hover=True,
    responsive=True,
    striped=True,
)


app.layout = html.Div([
    html.H4(children='US Agriculture Exports (2011)'),
    table
])


app.run_server(debug=True, use_reloader=False)

Output

To learn more about the options you have to customize the table, see

reply