Interactivité de Dash AG Grid

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Styliser toutes les cellules AG Grid

Impossible d'utiliser style ❌
Utilisez plutôt cellStyle ✅

grid = AgGrid(
defaultColDef={
    "cellStyle": 
    {"textAlign": "right"}}
)

Les deux premières colonnes du tableau de la leçon précédente. Les en-têtes sont « Major Category » et « Total Sales ($) » avec quatre lignes de données. Tout le contenu des cellules est aligné à droite.

Styliser certaines cellules AG Grid

column_defs = [
{"field": "Major Category"
, "cellStyle": {"textAlign": "center"}},
{"field": "Total Sales ($)"
, "valueFormatter": money_fmt
, "cellStyle": {"textAlign": "right"}}
]

Même tableau que la diapositive précédente ; la première colonne « Major Category » est centrée et la seconde « Total Sales ($) » est alignée à droite.

Autres exemples de style

Utilisez d'autres CSS pour la mise en forme ✨

grid = AgGrid(
# Other setup
defaultColDef={
"cellStyle": {
  "backgroundColor": "black",
   "color": "white"}
})

Même tableau que la diapositive précédente, mais les cellules ont un fond noir et un texte blanc.

Sélectionner des cellules

Utilisez la propriété cellClicked
Rappel pour afficher l'information de la cellule cliquée

@callback(
    Output("test_text", "children"),
    Input("my_grid", "cellClicked")
)
def show_cell_info(cell_data):
    return str(cell_data)

Un GIF du même tableau vu jusqu'ici. Sous le tableau, un dictionnaire se met à jour avec les détails d'une cellule après un clic.

Sélectionner des rangées

Définissez rowSelection à "single" ou "multiple"

grid = AgGrid(
# Other parts
dashGridOptions={
"rowSelection": "single"}
)

@callback(
Output("test_text", "children"),
Input("my_grid", "selectedRows")
)

Un GIF du même tableau vu jusqu'ici. Sous le tableau, une zone de texte grise se met à jour avec un dictionnaire représentant toute la rangée sélectionnée.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly