Introduction à Dash AG Grid

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Qu'est-ce que Dash AG Grid ?

Balise de tableau HTML (disponible dans Dash)
html.Table statique → limité

Dash AG Grid : dynamique et interactif
- Filtrage, masquage, export, style

Le tableau de base

from dash_ag_grid import AgGrid

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)"},
    {"field": "Sales Volume"},
]

grid = AgGrid(
columnDefs=column_defs,

rowData=major_cat_tb.to_dict("records"))

app.layout = [grid]

Un tableau avec 3 colonnes et quatre lignes contenant des données de l'ensemble e-commerce connu. Les en-têtes sont « Major Category », avec du texte dessous, « Total Sales ($) » avec des valeurs, et « Sales Volume » avec des entiers

Formater les nombres

Problème : formatage des nombres financiers
- Solution : utiliser valueFormatter
- Fonction de formatage JavaScript

money_fmt = {
"function": (
    """params.value.toLocaleString(
    'en-US', {style: 'currency', currency: 'USD'})"""
)}

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)", "valueFormatter": money_fmt},
    {"field": "Sales Volume"}
]
# Ajouter à la mise en page comme avant

Formater l'affichage des nombres

Bien formaté ✨

Le même tableau que dans la diapo précédente. La colonne Total Sales affiche désormais un signe dollar et des valeurs arrondies à 2 décimales. Le tableau a 3 colonnes et quatre lignes du même ensemble e-commerce. Les en-têtes sont « Major Category », « Total Sales ($) » et « Sales Volume » avec des entiers dessous

Ajouter le tri

Tri activé par défaut ⭐

# Désactiver globalement
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Spécifier par colonne
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Activer
{"field": "Sales Volume"
 , "sortable": False} # Désactiver
]

$$ Un GIF du tableau de base : quand on clique les en-têtes, les lignes sont triées

Ajouter des filtres

grid = AgGrid(
defaultColDef={
  "filter": True
  , "floatingFilter": True}
)

Prend en charge les filtres par valeur et par condition

Un GIF du tableau de base : une ligne de filtres apparaît sous l'en-tête. Le GIF filtre d'abord la première colonne sur Cloth, puis la seconde avec « Greater than », ce qui filtre le tableau.

Pagination

Utilisez la pagination pour les grands tableaux 💡

grid = AgGrid(
    dashGridOptions={
    "pagination": True,        
    "paginationPageSize": 2
    }

Un GIF du même tableau : seules deux lignes s'affichent et, en bas à droite, une pagination avec flèches et compteur (2 pages) indique la page courante.

Le tri et les filtres s'appliquent à tout le tableau 📌

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly