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, exportation, 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 rangées contenant des données de l'ensemble e-commerce. Les en-têtes : « 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

Joli formatage ✨

Le même tableau que sur la diapo précédente. La colonne Total Sales affiche maintenant un signe de dollar et des valeurs arrondies à 2 décimales. Le tableau a 3 colonnes et quatre rangées de l'ensemble e-commerce : en-têtes « Major Category », « Total Sales ($) » et « Sales Volume ».

Ajouter le tri

Le tri est 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 ; lorsqu'on clique les en-têtes, les rangées se trient.

Ajouter le filtrage

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

Prend en charge les filtres par valeur et par condition

Un GIF du tableau de base ; une rangée sous l'en-tête contient une case vide. Le GIF filtre d'abord la première colonne sur Cloth, puis la deuxième avec « Greater than », filtrant le tableau.

Pagination

Utilisez la pagination pour les grands tableaux 💡

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

Un GIF du même tableau de base ; il n'y a que deux rangées et, en bas à droite, un sélecteur de pagination avec flèches gauche/droite et un compteur (2 pages) indiquant la page courante.

Tri et filtrage s'appliquent à tout le tableau 📌

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly