Introduzione a Dash AG Grid

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Cos'è un Dash AG Grid?

Tag tabella HTML (disponibile in Dash)
html.Table statico → limitato

Dash AG Grid - dinamico e interattivo
- Filtri, nascondi, esporta, stile

La tabella di 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]

Una tabella con 3 colonne e quattro righe con dati dal consueto dataset e-commerce. Le intestazioni sono "Major Category", con testo nelle celle sotto, "Total Sales ($)" con valori sotto e "Sales Volume" con valori interi sotto

Formatta i numeri

Problema: formattazione di numeri finanziari
- Soluzione: usa valueFormatter
- Funzione di formattazione 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"}
]
# Aggiungi al layout come prima

Formatta l'output numerico

Formattata bene ✨

La stessa tabella della diapositiva precedente. La colonna Total Sales ora ha valori con simbolo $ iniziale e arrotondati a 2 decimali. La tabella ha 3 colonne e quattro righe con dati dal solito dataset e-commerce. Le intestazioni sono "Major Category", con testo sotto, "Total Sales ($)" e "Sales Volume" con valori interi sotto

Aggiungi ordinamento

L'ordinamento è attivo per impostazione predefinita ⭐

# Disattiva globalmente
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# Specifica per una colonna
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # Attiva
{"field": "Sales Volume"
 , "sortable": False} # Disattiva
]

$$ Una gif della tabella di base delle prime diapositive: quando si cliccano le intestazioni, le righe si ordinano

Aggiungi filtri

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

Supporta filtri per valore e condizione

Una gif della tabella di base delle prime diapositive; ora c'è una riga sotto l'intestazione con una casella vuota. La gif filtra prima la prima colonna su Cloth e poi la seconda con il menu Grater than, filtrando la tabella.

Paginazione

Usa la paginazione per tabelle lunghe 💡

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

Una gif della stessa tabella di base delle diapositive precedenti, ma ora ci sono solo due righe e in basso a destra c'è un controllo di paginazione con frecce sinistra/destra e un contatore di pagine (2) con la pagina corrente.

Ordinamento e filtri si applicano a tutta la tabella 📌

Esercitiamoci!

Creare dashboard con Dash e Plotly