Interactiviteit met Dash AG Grid

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Alle AG Grid-cellen stylen

style werkt niet ❌
Gebruik cellStyle ✅

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

De eerste twee kolommen van de tabel uit de vorige les. De koppen zijn "Major Category" en "Total Sales ($)" met vier rijen data. Alle celinhoud is rechts uitgelijnd.

Sommige AG Grid-cellen stylen

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

Dezelfde tabel als op de vorige slide; de eerste kolom "Major Category" is midden uitgelijnd en de tweede kolom "Total Sales ($)" rechts uitgelijnd.

Meer stylingvoorbeelden

Meer CSS gebruiken voor styling ✨

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

Dezelfde tabel als op de vorige slide; de cellen hebben een zwarte achtergrond en witte tekst.

Cellen selecteren

Gebruik de eigenschap cellClicked
Callback die info van de aangeklikte cel print

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

Een gif van dezelfde tabel als in de presentatie. Onder de tabel staat een dictionary die bijwerkt met de details van een aangeklikte cel.

Rijen selecteren

Zet rowSelection op "single" of "multiple"

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

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

Een gif van dezelfde tabel als in de presentatie. Onder de tabel staat een grijs tekstvlak dat bijwerkt met een dictionary van een hele rij wanneer geselecteerd.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly