Dash AG Grid 简介

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

什么是 Dash AG Grid？

HTML 表格标签（可用于 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 列的值已加美元符号并保留两位小数。全表含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} # 关闭
]

$$ 一个基础表格的动图：点击表头后，按该列对行进行排序

添加筛选

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

支持值与条件筛选

基础表格动图：表头下出现空白筛选框。先在第一列按"Cloth"筛选，再在第二列用"大于"条件筛选，表格被过滤。

分页

长表建议使用分页 💡

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

同样的基础表格，但仅显示两行；右下角有分页控件，含左右箭头与页数指示（2页）。

排序与筛选在全表生效 📌

Passons à la pratique !

使用 Dash 和 Plotly 构建仪表板