Interaktivita Dash AG Grid

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

Stylování všech buněk AG Grid

style nelze použít ❌
Místo toho použijte cellStyle ✅

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

První dva sloupce tabulky z předchozí lekce. Záhlaví jsou „Major Category" a „Total Sales ($)" se čtyřmi řádky dat. Všechna data v buňkách jsou zarovnána vpravo.

Stylování vybraných buněk AG Grid

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

Stejná tabulka jako na předchozím snímku; první sloupec „Major Category" má text zarovnaný na střed a druhý sloupec „Total Sales ($)" má text zarovnaný vpravo.

Další příklady stylování

Použijte další vlastnosti CSS pro stylování ✨

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

Stejná tabulka jako na předchozím snímku; buňky mají černé pozadí a bílý text.

Výběr buněk

Použijte vlastnost cellClicked
Callback pro výpis informací o kliknuté buňce

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

Animovaný gif stejné tabulky, která se v prezentaci opakovaně zobrazuje. Pod tabulkou je slovník, který se aktualizuje podrobnostmi o buňce po kliknutí na ni.

Výběr řádků

Nastavte rowSelection na "single" nebo "multiple"

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

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

Animovaný gif stejné tabulky, která se v prezentaci opakovaně zobrazuje. Pod tabulkou je šedé textové pole, které se aktualizuje slovníkem celého řádku při jeho výběru.

Pojďme cvičit!

Tvorba dashboardů s Dash a Plotly