Interaktywność Dash AG Grid

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Stylizacja wszystkich komórek AG Grid

Nie używaj style ❌
Zamiast tego użyj cellStyle ✅

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

Dwie pierwsze kolumny tabeli z poprzedniej lekcji: "Major Category" i "Total Sales ($)" z czterema wierszami danych. Zawartość komórek jest wyrównana do prawej.

Stylizacja wybranych komórek AG Grid

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

Ta sama tabela co na poprzednim slajdzie: kolumna "Major Category" z tekstem wyśrodkowanym, kolumna "Total Sales ($)" z tekstem wyrównanym do prawej.

Więcej przykładów stylizacji

Użyj innych właściwości CSS do stylizacji ✨

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

Ta sama tabela co na poprzednim slajdzie, lecz komórki mają czarne tło i biały tekst.

Zaznaczanie komórek

Użyj właściwości cellClicked
Callback wyświetlający informacje o klikniętej komórce

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

Animacja przedstawiająca tabelę z prezentacji. Poniżej tabeli wyświetla się słownik aktualizowany po kliknięciu komórki.

Zaznaczanie wierszy

Ustaw rowSelection na "single" lub "multiple"

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

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

Animacja przedstawiająca tabelę z prezentacji. Poniżej tabeli szare pole tekstowe aktualizuje się słownikiem całego wiersza po jego zaznaczeniu.

Czas na ćwiczenia!

Tworzenie dashboardów z Dash i Plotly