在Dash应用开发中，结合Mantine组件库的动态表格和下拉选择组件，可以让用户通过筛选操作实时更新表格内容，提升数据展示的灵活性和交互性。这种组合适合需要按分类、时间等维度筛选数据的场景，比如销售数据按区域筛选、用户数据按角色筛选等。
环境准备
首先需要安装必要的依赖库，确保Dash和Mantine组件库可以正常使用。执行以下命令安装依赖：
pip install dash dash-mantine-components pandas
核心组件介绍
Dash Mantine Dropdown组件
Dropdown是Mantine提供的下拉选择组件，支持单选、多选、搜索等模式，我们可以通过它的选中值来触发数据筛选逻辑。常用的核心属性包括：
- id：组件唯一标识，用于回调函数中识别组件
- data：下拉选项的数据列表，格式为[{"value": "选项值", "label": "选项显示文本"}, ...]
- value：当前选中的值
- placeholder：未选中时的提示文本
Dash Mantine 动态表格组件
Mantine的表格组件支持动态渲染数据，我们可以通过回调函数的返回值更新表格的行数据。核心属性包括：
- id：组件唯一标识
- columns：表格列的配置，定义每一列的标题和对应的数据字段
- records：表格的行数据，是一个列表，每个元素对应一行的数据字典
实现交互逻辑的步骤
1. 准备示例数据
我们先构造一份示例数据，模拟不同分类下的业务数据，后续通过Dropdown选择分类来筛选对应的数据展示到表格中。
import pandas as pd
# 构造示例数据
data = pd.DataFrame({
"分类": ["A类", "A类", "B类", "B类", "C类", "C类"],
"名称": ["产品1", "产品2", "产品3", "产品4", "产品5", "产品6"],
"销量": [120, 89, 156, 92, 203, 178],
"库存": [45, 32, 67, 28, 89, 56]
})
2. 构建页面布局
页面布局包含Dropdown组件和动态表格组件，Dropdown的选项来自数据的分类字段，表格初始展示全量数据。
from dash import Dash
from dash_mantine_components import Dropdown, Table
from dash import html
# 初始化Dash应用
app = Dash(__name__)
# 提取分类选项
category_options = [{"value": cat, "label": cat} for cat in data["分类"].unique()]
# 添加全量选项
category_options.insert(0, {"value": "全部", "label": "全部"})
# 定义表格列配置
columns = [
{"accessor": "分类", "title": "分类"},
{"accessor": "名称", "title": "产品名称"},
{"accessor": "销量", "title": "销量"},
{"accessor": "库存", "title": "库存"}
]
# 页面布局
app.layout = html.Div([
html.H3("分类数据筛选展示"),
Dropdown(
id="category-dropdown",
data=category_options,
value="全部",
placeholder="请选择分类",
style={"width": "200px", "marginBottom": "20px"}
),
Table(
id="dynamic-table",
columns=columns,
records=data.to_dict("records")
)
], style={"padding": "20px"})
3. 编写回调联动逻辑
通过Dash的回调函数，监听Dropdown的选中值变化，根据选中值筛选数据，再将筛选后的数据更新到表格的records属性中。
from dash.dependencies import Input, Output
@app.callback(
Output("dynamic-table", "records"),
Input("category-dropdown", "value")
)
def update_table(selected_category):
# 如果选择全部，返回全量数据
if selected_category == "全部":
return data.to_dict("records")
# 否则筛选对应分类的数据
filtered_data = data[data["分类"] == selected_category]
return filtered_data.to_dict("records")
if __name__ == "__main__":
app.run_server(debug=True)
功能扩展建议
上述示例实现了基础的交互功能，还可以根据需求扩展更多能力：
- 给Dropdown添加多选模式，支持同时选择多个分类展示数据
- 给表格添加排序、分页功能，提升大量数据的展示体验
- 增加加载状态提示，在数据筛选过程中显示加载动画
- 结合其他Mantine组件，比如DatePicker实现时间范围筛选，进一步丰富筛选维度
常见问题说明
开发过程中可能会遇到表格数据不更新的问题，首先检查回调函数的输入输出是否正确对应组件的属性，其次确认筛选逻辑是否正确处理了数据格式。如果Dropdown选项没有正常显示，检查data属性的格式是否符合要求，必须是包含value和label的字典列表。