Інтерактивність Dash AG Grid

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

Стилізація всіх комірок AG Grid

Не можна використовувати style ❌
Замість цього використовуйте cellStyle ✅

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

Перші два стовпці таблиці з попереднього уроку. Заголовки: «Major Category» та «Total Sales ($)», чотири рядки даних. Усі дані в комірках вирівняні праворуч.

Стилізація окремих комірок AG Grid

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

Така сама таблиця, як на попередньому слайді; однак у першому стовпці «Major Category» текст вирівняно по центру, а в другому «Total Sales ($)» — праворуч.

Ще приклади стилізації

Використовуйте інші CSS-властивості для стилізації ✨

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

Така сама таблиця, як на попередньому слайді; однак комірки мають чорний фон і білий текст

Вибір комірок

Використовуйте властивість cellClicked
Колбек виводить інформацію про натиснуту комірку

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

GIF тієї самої таблиці, що була раніше. Під таблицею — словник, який оновлюється деталями комірки після натискання.

Вибір рядків

Встановіть rowSelection як "single" або "multiple"

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

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

GIF тієї самої таблиці, що була раніше. Під таблицею — сіре текстове поле, яке оновлюється словником усього рядка після вибору

Давайте потренуємось!

Створення дашбордів з Dash і Plotly