My Dash tutorials look way different than in the docs. Should they?

Question

I'm a seasoned back-end engineer, but I'm a newbie with browser-based GUI design (HTML, CSS, etc.). I need to build a dashboard and have found Dash. I'm just starting to work through the examples.

When I run the examples, my results look nothing like what is shown in the documentation. The documentation states that there can be small differences, but my differences are anything but small. For example, with one of the early table examples, my tables have no borders, background colors, etc. It seems to me that no styles are being applied. I'm wondering if what I'm getting is to be expected, or if something is wrong.

Here's an example. This example comes from the "Reusable Components" section of the Layout tutorial section. In the docs, the first table example looks like this:

but what I get is this:

Here's the example code:

# 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 have looked in the Developer Tools Console in Chrome and I don't see any errors suggesting that CSS files are failing to load, etc. I am working in PyCharm on a Mac. I'm copying/pasting the text as-is into an empty "app.py" file and running that file.

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

If this is what I should be getting, how should I go about finding and applying a good set of styles to get my tables to look decent? Do I have to learn to style tables one setting at a time, or is there a better way? Is there some sort of notion in HTML/CSS of "plug ins" for grabbing and inserting a set of styles for a particular purpose, like styling tables? If so, where should I look for such "plug ins"? I know that React is being used on the front-end, but being so green with this stuff, that knowledge doesn't really help me.

TIA for any help!

Answer 1

I encourage you to use Dash Bootstrap Components to get style your table easily, and I re-write your example with this library and I get the desired 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 understand more about the options you have to customize your table look at here