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"}
]
# 如前加入版面配置

格式化輸出數字

格式漂亮 ✨

與上一張相同的表格，但 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}
)

支援值與條件篩選

一個基本表格的 GIF。標題下方新增一列空白輸入框。GIF 先在第一欄以 Cloth 篩選，再在第二欄用 Greater than 下拉選單篩選表格。

分頁

長表格請用 pagination 分頁 💡

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

相同基本表格的 GIF，但一次只顯示兩筆資料，表格右下有分頁控制，含左右箭頭與頁數（2）及目前頁次。

排序與篩選為全表格套用 📌

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板