Interaktivitet i Dash AG Grid

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Formatera alla AG Grid-celler

Använd inte style ❌
Använd cellStyle i stället ✅

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

De två första kolumnerna i tabellen från föregående lektion. Den har rubrikerna "Major Category" och "Total Sales ($)" med fyra rader data. All data i cellerna är högerjusterad.

Formatera vissa AG Grid-celler

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

Samma tabell som på föregående slide; den första kolumnen "Major Category" har centrerad text och den andra kolumnen "Total Sales ($)" har högerjusterad text.

Fler formateringsexempel

Använd andra CSS-egenskaper för formatering ✨

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

Samma tabell som på föregående slide; cellerna har svart bakgrundsfärg och vit text.

Markera celler

Använd egenskapen cellClicked
Callback som skriver ut information om den klickade cellen

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

En gif av samma tabell som visats i slideshown hittills. Under tabellen visas en ordbok som uppdateras med detaljer om en cell när den klickas.

Markera rader

Sätt rowSelection till "single" eller "multiple"

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

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

En gif av samma tabell som visats i slideshown hittills. Under tabellen finns ett grått textfält som uppdateras med en ordbok för hela raden när den markeras.

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly