Interattività di Dash AG Grid

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Stilizzare tutte le celle di AG Grid

Non usare style ❌
Usa invece cellStyle ✅

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

Le prime due colonne della tabella della lezione precedente. Le intestazioni sono "Major Category" e "Total Sales ($)" con quattro righe di dati. Tutti i dati nelle celle sono allineati a destra.

Stilizzare alcune celle di AG Grid

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

È la stessa tabella della diapositiva precedente; tuttavia, la prima colonna "Major Category" ha testo centrato e la seconda "Total Sales ($)" ha testo allineato a destra.

Altri esempi di stile

Usa altre regole CSS per lo stile ✨

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

È la stessa tabella della diapositiva precedente; tuttavia le celle hanno sfondo nero e testo bianco

Selezionare celle

Usa la proprietà cellClicked
Callback per stampare le info della cella cliccata

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

Una gif della stessa tabella vista finora nella presentazione. Sotto la tabella c'è un dizionario che si aggiorna con i dettagli della cella al clic.

Selezionare righe

Imposta rowSelection su "single" o "multiple"

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

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

Una gif della stessa tabella vista finora nella presentazione. Sotto la tabella c'è un'area di testo grigia che si aggiorna con un dizionario dell'intera riga selezionata

Esercitiamoci!

Creare dashboard con Dash e Plotly