Интерактивность 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 выводит информацию о нажатой ячейке

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

Анимация той же таблицы из слайдшоу. Под таблицей отображается словарь, который обновляется при нажатии на ячейку.

Выбор строк

Задайте rowSelection значение "single" или "multiple"

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

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

Анимация той же таблицы из слайдшоу. Под таблицей серая область, которая обновляется словарём с данными всей строки при её выборе.

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly