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

Dash Python
1

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.

Take, for example, the first table example in Part 2 of the tutorial. Here’s what I get:

image
image1222×444 35.1 KB

Yuck, right? This looks nothing like what is shown in the tutorial. What am I missing? I can’t believe that I should be getting something that looks so different than what’s in the docs and yet the docs don’t mention this.

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. I’ve tried both Chrome and Safari and have tried running from the command line. Same results all around.

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? How can I fix my results? TIA!

2

Welcome @Blatwurst

Indeed there is definitely is going wrong there. Can you copy paste your code here for us? You can wrap your code in three of the ` sign like so but remove the space between them

` ` `
Paste code here
` ` `

Also what is your folder structure and venv like? I assume you’re running a venv for your project. My first guess is you have some conflicts in some libraries.

For your project folder you’ll have app.py in the root with an assets folder to hold your css and js (not required but this is how you can customize more) and you can even put in .ico file for the browser tab icon and any images (maybe you have a logo or something in the header)

In theory the project structure shouldn’t be your issue I’m leaning towards your venv (or lack of one) having a conflict. Or maybe you have some rogue css files that are removing the table styles.

What happens if you just try using plotly to make a data_table and you can just write it to a HTML file and launch it to see if the table looks correct. Once you create the table you can use fig.write_html(‘test.html’) to generate the stand alone html page.

Thanks
Payton

1 Like
3

Hi Payton. Thanks for your response. I maybe should have mentioned that I’ve tried a couple of versions of Python, always in a virtualenv. I hadn’t, however, created a fresh virtualenv just to test this issue. So I did that. Unfortunately, I get the same result.

My code is exactly the table example in Part 2 of the tutorial, under the section head “Reusable Components”. Here’s the 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)

And here’s a complete blow-by-blow starting with building a new virtualenv and ending with a running app:

*[main][~/tmp]$ mkdir dash_example
*[main][~/tmp]$ cd dash_example
*[main][~/tmp/dash_example]$ python --version
Python 3.10.6
*[main][~/tmp/dash_example]$ virtualenv env
/usr/local/lib/python3.9/site-packages/setuptools/command/install.py:34: SetuptoolsDeprecationWarning: setup.py install is deprecated. Use build and pip and other standards-based tools.
  warnings.warn(
created virtual environment CPython3.9.14.final.0-64 in 456ms
  creator CPython3Posix(dest=/Users/steve/tmp/dash_example/env, clear=False, no_vcs_ignore=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=/Users/steve/Library/Application Support/virtualenv)
    added seed packages: pip==22.2.2, setuptools==65.3.0, wheel==0.37.1
  activators BashActivator,CShellActivator,FishActivator,NushellActivator,PowerShellActivator,PythonActivator
*[main][~/tmp/dash_example]$ source env/bin/activate
(env) *[main][~/tmp/dash_example]$ pip install dash
Collecting dash
  Using cached dash-2.6.2-py3-none-any.whl (9.8 MB)
Collecting flask-compress
 ...
 Successfully installed Flask-2.2.2 Jinja2-3.1.2 MarkupSafe-2.1.1 Werkzeug-2.2.2 brotli-1.0.9 click-8.1.3 dash-2.6.2 dash-core-components-2.0.0 dash-html-components-2.0.0 dash-table-5.0.0 flask-compress-1.13 importlib-metadata-5.0.0 itsdangerous-2.1.2 plotly-5.10.0 tenacity-8.1.0 zipp-3.9.0
...
(env) *[main][~/tmp/dash_example]$ pip install pandas
...
Successfully installed numpy-1.23.4 pandas-1.5.0 python-dateutil-2.8.2 pytz-2022.5 six-1.16.0
...
(env) *[main][~/tmp/dash_example]$ vi app.py
(env) *[main][~/tmp/dash_example]$ python app.py
Dash is running on http://127.0.0.1:8050/

 * Serving Flask app 'app'
 * Debug mode: on

Hitting http://127.0.0.1:8050 with my browser leads to the same yucky results I showed in my original post.

Just for yucks, I created another virtualenv based on Python 3.8 and did exactly what I show above. Same result.

WT*?

4

…I’m going to try what you suggest. I’ll put together a simple Plotly example to see if I get a better result.

I’m not sure where I’d look for some sort of conflicting CSS. I thought maybe the problem was due to a browser plugin, or something else about the browser’s environment, but Safari gives me the same result as Chrome. I even went so far, just now, as running Firefox, something I haven’t done in many moons. Same thing. If you can tell me where I might look for anything that could possibly be getting in the way across three browsers and a virgin virtualenv, I’d be happy to take a look.

I’ll add that I don’t generally do much in the way of modifying my desktop environment. The most intrusive things I can think of that I run are Alfred and BetterTouchTool, two utilities that allow for mapping input devices to interesting actions.

5

Hmm I’m not sure what tutorial you’re referring to specifically but that code is more of a html not dash code. Looks more like flask jinja rendering way of doing things.

Because of that I assume you’re following a really old tutorial from when they first made dash.

Check out Dash DataTable from dash. import data_table Dash DataTable | Dash for Python Documentation | Plotly

I’m on my phone right now so I can’t test your code but here’s the quickest way you can test out to see if your table works with dash_table

from dash import Dash, dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = Dash(__name__)

app.layout = dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns])

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

If that works then there’s more ways you can customize this to work with your project.

Thanks
Payton

6

Hi @Blatwurst

The issue is that the docs are made with Dash Enterprise and use Dash Design Kit - so you will see some style differences between the docs vs open source Dash.

If you are looking for an easy way to style a basic html table in Dash, I recommend using the dash-bootstrap-components library https://dash-bootstrap-components.opensource.faculty.ai/docs/components/table/

If you want more data table features, you can skip ahead in the tutorial to the section on the Dash DataTable as @payton-dev recommended: Dash DataTable | Dash for Python Documentation | Plotly. You will find lots of ways to style the DataTable there.

1 Like
7

Huh? If I go to the top of the page on which I’m reading your responses (https://community.plotly.com/) and I click on “Dash Docs”, I get the Dash documentation. If I then go to the navigation panel at the left of my screen, expand Dash Tutorial, and the click on “Part 2. Layout”, that’s the tutorial I’m talking about. The other way I can get there is by going to https://dash.plotly.com web site and clicking on Layout under the Tutorial section. H ow can that not be current and not be demonstrating Dash code? The code does app = Dash(__name__) and uses the “Dash Core Components” and “Dash HTML Components” libraries. Maybe this is where I’ve gone wrong. Is there some other Dash that you’re talking about besides what I’m using?

8

Can you try following my post and see if that works. We want to make sure you’re able to get it to work then we can expand from there.

9

Thanks for your help. Ok, yes, that code produces a table that looks much more reasonable. I’m not sure where that puts me though. I didn’t come to Dash looking for a table widget. I want to use Dash to build a devops dashboard using HTML and CSS while only writing Python code. Of course, having all of these great higher level components will be wonderful. Dash seems wonderful.

So I’ll just proceed with the knowledge that the documentation is a bit misleading, and the results I’m getting are to be expected. I mostly just wanted to be sure that my environment wasn’t broken.

Thanks again!

10

Thanks Ann Marie. I’ll take a look at the links you provide.

11

I have to give an update and thank you again Ann Marie. Your pointer to the DBC module provided just what I was missing, a module and documentation that allow me to make use of standard HTML table primitives to build a pre-stylized table. I assume that this module will provide similar benefits as I get to know Dash and make use of other standard HTML primitives. Thanks!