Interaktivität mit Dash AG Grid

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Alle AG-Grid-Zellen stylen

style geht nicht ❌
Nutze stattdessen cellStyle ✅

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

Die ersten beiden Spalten der Tabelle aus der vorherigen Lektion. Überschriften: „Major Category" und „Total Sales ($)" mit vier Datenzeilen. Alle Zellinhalte sind rechtsbündig.

Einige AG-Grid-Zellen stylen

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

Dieselbe Tabelle wie auf der vorherigen Folie; jedoch ist die erste Spalte „Major Category" zentriert und die zweite Spalte „Total Sales ($)" rechtsbündig.

Weitere Styling-Beispiele

Andere CSS-Eigenschaften nutzen ✨

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

Dieselbe Tabelle wie auf der vorherigen Folie; jedoch mit schwarzem Zellhintergrund und weißem Text

Zellen auswählen

Verwende die Eigenschaft cellClicked
Callback, um Infos der geklickten Zelle auszugeben

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

Ein GIF derselben Tabelle wie bisher. Unter der Tabelle erscheint ein Dictionary, das sich nach Klick auf eine Zelle mit deren Details aktualisiert.

Zeilen auswählen

Setze rowSelection auf "single" oder "multiple"

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

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

Ein GIF derselben Tabelle wie bisher. Unter der Tabelle befindet sich ein grauer Textbereich, der sich mit einem Dictionary der gesamten Zeile aktualisiert, sobald sie ausgewählt wird.

Lass uns üben!

Dashboards mit Dash und Plotly erstellen