Dash AG Grid の概要

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

Alex Scriven

Data Scientist

Dash AG Grid とは

HTML の table タグ（Dash で利用可）
html.Table は静的 → 制約が多い

Dash AG Grid — 動的でインタラクティブ
- フィルタ、非表示、エクスポート、スタイル設定

基本のテーブル

from dash_ag_grid import AgGrid

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)"},
    {"field": "Sales Volume"},
]

grid = AgGrid(
columnDefs=column_defs,

rowData=major_cat_tb.to_dict("records"))

app.layout = [grid]

3列4行のテーブル。列ヘッダーは「Major Category」「Total Sales ($)」「Sales Volume」。各列に対応するデータが表示されている

数値を整形

課題: 金額の書式設定
- 解決策: valueFormatter を使用
- JavaScript のフォーマッタ関数

money_fmt = {
"function": (
    """params.value.toLocaleString(
    'en-US', {style: 'currency', currency: 'USD'})"""
)}

column_defs = [
    {"field": "Major Category"},
    {"field": "Total Sales ($)", "valueFormatter": money_fmt},
    {"field": "Sales Volume"}
]
# Add to layout as before

整形後の表示

見た目よく整形 ✨

前スライドと同じ表。Total Sales 列の値が$記号付きで小数第2位までに整形されている。全体は3列4行で、列ヘッダーは「Major Category」「Total Sales ($)」「Sales Volume」

並べ替えを追加

既定で並べ替えは有効 ⭐

# 全体でオフにする
grid = AgGrid(
  defaultColDef={"sortable": False}
)

# 列ごとに指定
column_defs = [
{"field": "Major Category"
 , "sortable": True}, # 有効化
{"field": "Sales Volume"
 , "sortable": False} # 無効化
]

$$ 最初のスライドの基本表。ヘッダーをクリックすると行が並べ替えられるGIF

フィルタを追加

grid = AgGrid(
defaultColDef={
  "filter": True
  , "floatingFilter": True}
)

値フィルタと条件フィルタに対応

基本表のヘッダー下に空の入力欄が1行追加されたGIF。1列目をClothで絞り込み、次に2列目を「より大きい」で絞り込んで表がフィルタされる

ページネーション

長い表にはページネーションを使用 💡

grid = AgGrid(
    dashGridOptions={
    "pagination": True,        
    "paginationPageSize": 2
    }

同じ基本表だが、表示は2行のみ。右下に前後矢印とページ数(2)・現在ページを示すページネーションがあるGIF

並べ替えとフィルタは表全体に適用 📌

Passons à la pratique !

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