Interactivitatea Dash AG Grid

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Stilizarea tuturor celulelor AG Grid

Nu se utilizează style ❌
Utilizați în schimb cellStyle ✅

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

Primele două coloane ale tabelei din lecția anterioară. Are antetele „Major Category" și „Total Sales ($)" cu patru rânduri de date. Toate datele din celule sunt aliniate la dreapta.

Stilizarea unor celule AG Grid

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

Aceeași tabelă ca în diapozitivul anterior; prima coloană „Major Category" are text centrat, iar a doua coloană „Total Sales ($)" are text aliniat la dreapta.

Mai multe exemple de stilizare

Utilizați alte proprietăți CSS pentru stilizare ✨

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

Aceeași tabelă ca în diapozitivul anterior; celulele au fundal negru și text alb.

Selectarea celulelor

Utilizați proprietatea cellClicked
Callback pentru afișarea informațiilor celulei clic-ate

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

Un gif al aceleiași tabele prezente în prezentare. Sub tabelă apare un dicționar care se actualizează cu detaliile celulei clic-ate.

Selectarea rândurilor

Setați rowSelection la "single" sau "multiple"

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

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

Un gif al aceleiași tabele prezente în prezentare. Sub tabelă apare o zonă de text gri care se actualizează cu un dicționar al unui rând întreg la selectare.

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly