Mon tutoriel Dash est différent de celui de la documentation. Le devraient-ils ?

Question

Je suis un ingénieur backend expérimenté, mais je suis nouveau dans la conception d'interfaces graphiques basées sur un navigateur (HTML, CSS, etc.). J'avais besoin de créer un tableau de bord et j'ai trouvé Dash. Je viens de commencer à travailler sur ces exemples.

Lorsque j'exécute l'exemple, mes résultats sont complètement différents de ceux affichés dans la documentation. La documentation indique qu'il peut y avoir des différences mineures, mais mes différences ne sont pas du tout mineures. Par exemple, pour l'un des exemples de tableau précédents, mon tableau n'avait ni bordures, ni couleur d'arrière-plan, etc. Il me semble qu'aucun style n'est appliqué. J'aimerais savoir si les résultats que j'obtiens sont comme prévu ou s'il y a quelque chose qui ne va pas.

Voici un exemple. Cet exemple provient de la section « Composants réutilisables » de la section du didacticiel de mise en page. Dans la documentation, la première représentation ressemble à ceci :

Mais ce que j'obtiens, c'est ceci :

L'exemple de code est le suivant :

# 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)

J'ai vérifié la console des outils de développement dans Chrome et je n'ai vu aucune erreur indiquant que le fichier CSS n'a pas pu être chargé. Je travaille dans PyCharm sur Mac. J'ai copié/collé le texte tel quel dans un fichier "app.py" vide et j'ai exécuté le fichier.

Mes résultats sont-ils erronés ou simplement mes attentes sont-elles erronées ? Si je devais obtenir des résultats plus beaux, qu’est-ce qui pourrait me manquer ?

Si c'est ce que je suis censé obtenir, comment dois-je trouver et appliquer un bon ensemble de styles pour donner une belle apparence à ma table ? Dois-je apprendre les styles de table un ensemble à la fois, ou existe-t-il une meilleure façon ? Existe-t-il une sorte de concept de « plugin » en HTML/CSS qui récupère et insère un ensemble de styles dans un but spécifique, comme une feuille de style ? Si oui, où dois-je chercher un tel « plugin » ? Je savais que le frontend utilisait React, mais j'étais si nouveau dans ce domaine que ces connaissances ne m'ont pas vraiment aidé.

TIA cherche de l'aide !

Answer 1

Je vous encourage à utiliser le composant Dash Bootstrap pour styliser facilement vos tableaux, j'ai utilisé cette bibliothèque pour réécrire votre exemple et obtenir le résultat souhaité :

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)

Sortie

Pour en savoir plus sur les options dont vous disposez pour personnaliser le tableau, voir

répondre