Dash AG Grid のインタラクション

Dash と Plotly で作るダッシュボード

Alex Scriven

Data Scientist

すべての AG Grid セルのスタイル設定

style は使用不可 ❌
代わりに cellStyle を使用 ✅

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

前のレッスンの表の最初の2列。ヘッダーは「Major Category」と「Total Sales ($)」。4行のデータがあり、すべて右寄せ。

一部の AG Grid セルのスタイル設定

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

前のスライドと同じ表。1列目「Major Category」は中央寄せ、2列目「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 で作るダッシュボード