Dash Mantine组件动态表格：结合Dropdown实现交互式数据展示

本教程详细介绍了如何在dash应用中利用`dash_mantine_components`库的`dmc.table`组件和`dash_core_components`的`dcc.dropdown`实现动态表格。通过spotify数据集的案例，我们将学习如何根据用户选择的流派和子流派，实时更新并展示top 10艺术家列表。核心在于正确配置回调函数的`output`为`children`属性，并返回符合`dmc.table`结构要求的`html.thead`和`html.tbody`元素列表。

引言：Dash动态表格的魅力

在构建交互式数据可视化应用时，动态表格是不可或缺的组成部分。它允许用户通过各种控件（如下拉菜单、滑块等）实时筛选和查看数据，从而提供更深入的洞察。Dash作为Python领域流行的Web应用框架，结合dash_mantine_components (dmc) 库，能够帮助开发者快速构建美观且功能强大的仪表板。本教程将专注于如何利用dmc.Table组件和dcc.Dropdown组件，实现一个根据用户选择动态更新数据的表格。

环境准备与数据加载

在开始之前，请确保您已安装所需的Python库：dash、pandas、dash_core_components、dash_html_components和dash_mantine_components。

pip install dash pandas dash-core-components dash-html-components dash-mantine-components

我们将使用一个Spotify歌曲数据集，目标是根据用户选择的“流派”和“子流派”，展示该类别下的Top 10艺术家及其歌曲数量。

import pandas as pdfrom dash import Dash, dcc, html, Input, Outputimport dash_mantine_components as dmc# 假设您的数据文件名为 'spotify_songs.csv'# 请替换为您的实际数据路径try:    data = pd.read_csv('spotify_songs.csv')except FileNotFoundError:    print("请确保 'spotify_songs.csv' 文件存在于当前目录或提供正确路径。")    # 创建一个模拟数据框用于演示，如果文件不存在    data = pd.DataFrame({        'Artist': ['ArtistA', 'ArtistB', 'ArtistC', 'ArtistD', 'ArtistA', 'ArtistB', 'ArtistE', 'ArtistF', 'ArtistA', 'ArtistB'] * 20,        'Genre': ['Pop', 'Pop', 'Rock', 'Pop', 'Rock', 'Jazz', 'Pop', 'Rock', 'Pop', 'Jazz'] * 20,        'Subgenre': ['Dance Pop', 'Electro Pop', 'Alternative Rock', 'Synth Pop', 'Classic Rock', 'Smooth Jazz', 'Dance Pop', 'Hard Rock', 'Electro Pop', 'Bebop'] * 20    })    # 确保模拟数据足够大，以产生Top 10结果    data = data.sample(n=300, replace=True).reset_index(drop=True)app = Dash(__name__)# 获取流派和子流派的唯一值，用于下拉菜单选项genres = data['Genre'].unique().tolist()subgenres = data['Subgenre'].unique().tolist()

Dash应用布局构建

Dash应用的布局由一系列HTML组件构成。我们将创建一个包含两个下拉菜单（用于选择流派和子流派）和一个dmc.Table组件（用于展示动态数据）的简单布局。dmc.Table组件在初始时将是空的，其内容将由回调函数动态填充。

app.layout = dmc.Container(    [        dmc.Title("Spotify Top 10 艺术家动态榜单", order=1),        dmc.Space(h="md"),        dmc.Grid(            [                dmc.Col(                    dcc.Dropdown(                        id="genre-dropdown",                        options=[{"label": g, "value": g} for g in genres],                        placeholder="选择流派",                        value=genres[0] if genres else None, # 默认选中第一个流派                        clearable=False,                    ),                    span=6,                ),                dmc.Col(                    dcc.Dropdown(                        id="subgenre-dropdown",                        options=[{"label": sg, "value": sg} for sg in subgenres],                        placeholder="选择子流派",                        value=subgenres[0] if subgenres else None, # 默认选中第一个子流派                        clearable=False,                    ),                    span=6,                ),            ],            gutter="xl",        ),        dmc.Space(h="xl"),        dmc.Card(            children=[                dmc.Text("Top 10 艺术家", size='lg', color='dimmed', weight=500, align='center'),                # dmc.Table组件将通过回调函数更新其children属性                dmc.Table(id='top_10_artists', striped=True, highlightOnHover=True, withBorder=True, withColumnBorders=True),            ],            withBorder=True,            shadow='lg',            radius='md',        ),    ],    fluid=True,)

关键点: dmc.Table(id=’top_10_artists’) 在布局中被定义，但没有直接提供数据。其内容将完全由回调函数通过更新其children属性来控制。

实现核心交互：回调函数

回调函数是Dash应用的核心，它负责响应用户输入并更新应用布局。在本例中，我们将创建一个回调函数，监听genre-dropdown和subgenre-dropdown的值变化，然后计算并返回更新后的dmc.Table内容。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26 查看详情

回调函数签名解析

@app.callback(    Output("top_10_artists", "children"), # 关键：更新dmc.Table的children属性    Input("genre-dropdown", "value"),    Input("subgenre-dropdown", "value"))def update_top_10_artists_table(selected_genre, selected_subgenre):    # ... 函数体 ...

Output(“top_10_artists”, “children”): 这是最重要的部分。dmc.Table组件期望其内容（表头和表体）作为其children属性来渲染。因此，我们的回调函数必须返回一个包含html.Thead和html.Tbody元素的列表。尝试更新”table”属性（如原始问题中的尝试）会导致SchemaLengthValidationError，因为dmc.Table组件没有名为”table”的属性来接收这种结构。Input(“genre-dropdown”, “value”) 和 Input(“subgenre-dropdown”, “value”): 当这两个下拉菜单的选中值发生变化时，回调函数将被触发。

数据处理与HTML元素构建

在回调函数内部，我们将执行以下步骤：

根据选定的流派和子流派筛选原始数据集。计算每个艺术家的歌曲数量，并获取Top 10。将这些数据转换为html.Thead（表头）和html.Tbody（表体）的HTML结构。

为了提高代码的健壮性和可维护性，我们将使用循环来生成表格的行，而不是硬编码每一行。

@app.callback(    Output("top_10_artists", "children"),    Input("genre-dropdown", "value"),    Input("subgenre-dropdown", "value"))def update_top_10_artists_table(selected_genre, selected_subgenre):    if not selected_genre or not selected_subgenre:        return html.Div("请选择流派和子流派以查看数据。", style={'textAlign': 'center', 'marginTop': '20px'})    # 复制数据以避免修改原始DataFrame    df_filtered = data.copy()    # 根据选择的流派和子流派进行筛选    df_filtered = df_filtered[        (df_filtered['Genre'] == selected_genre) &        (df_filtered['Subgenre'] == selected_subgenre)    ]    # 计算艺术家歌曲数量并获取Top 10    artists_counts = df_filtered['Artist'].value_counts().reset_index()    artists_counts.columns = ['Artist', 'Count'] # 重命名列以便后续访问    top_10_artists = artists_counts.head(10)    # 如果没有数据，返回提示信息    if top_10_artists.empty:        return html.Div("当前流派和子流派下没有找到艺术家数据。", style={'textAlign': 'center', 'marginTop': '20px'})    # 构建表头    header = html.Thead(        html.Tr(            [                html.Th('艺术家'),                html.Th('歌曲数量')            ]        )    )    # 构建表体    # 使用列表推导式动态生成表格行    rows = []    for index, row_data in top_10_artists.iterrows():        rows.append(            html.Tr([                html.Td(row_data['Artist']),                html.Td(row_data['Count'])            ])        )    body = html.Tbody(rows)    # 返回表头和表体组成的列表    return [header, body]

注意事项：

我们添加了对selected_genre和selected_subgenre是否为空的检查，以及对top_10_artists是否为空的检查，以提供更好的用户体验和错误处理。使用artists_counts.columns = [‘Artist’, ‘Count’]重命名了列，使得在构建html.Td时可以更清晰地通过名称访问数据。通过for循环和列表推导式生成html.Tr和html.Td，这比硬编码10行更加灵活和易于维护，尤其当结果数量不固定时。

完整示例代码

将所有部分整合，以下是完整的Dash应用代码：

import pandas as pdfrom dash import Dash, dcc, html, Input, Outputimport dash_mantine_components as dmc# 假设您的数据文件名为 'spotify_songs.csv'# 请替换为您的实际数据路径try:    data = pd.read_csv('spotify_songs.csv')except FileNotFoundError:    print("请确保 'spotify_songs.csv' 文件存在于当前目录或提供正确路径。")    # 创建一个模拟数据框用于演示，如果文件不存在    data = pd.DataFrame({        'Artist': ['ArtistA', 'ArtistB', 'ArtistC', 'ArtistD', 'ArtistA', 'ArtistB', 'ArtistE', 'ArtistF', 'ArtistA', 'ArtistB'] * 20,        'Genre': ['Pop', 'Pop', 'Rock', 'Pop', 'Rock', 'Jazz', 'Pop', 'Rock', 'Pop', 'Jazz'] * 20,        'Subgenre': ['Dance Pop', 'Electro Pop', 'Alternative Rock', 'Synth Pop', 'Classic Rock', 'Smooth Jazz', 'Dance Pop', 'Hard Rock', 'Electro Pop', 'Bebop'] * 20    })    data = data.sample(n=300, replace=True).reset_index(drop=True)app = Dash(__name__)genres = data['Genre'].unique().tolist()subgenres = data['Subgenre'].unique().tolist()app.layout = dmc.Container(    [        dmc.Title("Spotify Top 10 艺术家动态榜单", order=1, align='center'),        dmc.Space(h="md"),        dmc.Grid(            [                dmc.Col(                    dcc.Dropdown(                        id="genre-dropdown",                        options=[{"label": g, "value": g} for g in genres],                        placeholder="选择流派",                        value=genres[0] if genres else None,                        clearable=False,                    ),                    span=6,                ),                dmc.Col(                    dcc.Dropdown(                        id="subgenre-dropdown",                        options=[{"label": sg, "value": sg} for sg in subgenres],                        placeholder="选择子流派",                        value=subgenres[0] if subgenres else None,                        clearable=False,                    ),                    span=6,                ),            ],            gutter="xl",        ),        dmc.Space(h="xl"),        dmc.Card(            children=[                dmc.Text("Top 10 艺术家", size='lg', color='dimmed', weight=500, align='center'),                dmc.Space(h="sm"),                dmc.Table(id='top_10_artists', striped=True, highlightOnHover=True, withBorder=True, withColumnBorders=True),            ],            withBorder=True,            shadow='lg',            radius='md',        ),    ],    fluid=True,    size="lg")@app.callback(    Output("top_10_artists", "children"),    Input("genre-dropdown", "value"),    Input("subgenre-dropdown", "value"))def update_top_10_artists_table(selected_genre, selected_subgenre):    if not selected_genre or not selected_subgenre:        return html.Div("请选择流派和子流派以查看数据。", style={'textAlign': 'center', 'marginTop': '20px'})    df_filtered = data.copy()    df_filtered = df_filtered[        (df_filtered['Genre'] == selected_genre) &        (df_filtered['Subgenre'] == selected_subgenre)    ]    artists_counts = df_filtered['Artist'].value_counts().reset_index()    artists_counts.columns = ['Artist', 'Count']    top_10_artists = artists_counts.head(10)    if top_10_artists.empty:        return html.Div("当前流派和子流派下没有找到艺术家数据。", style={'textAlign': 'center', 'marginTop': '20px'})    header = html.Thead(        html.Tr(            [                html.Th('艺术家'),                html.Th('歌曲数量')            ]        )    )    rows = []    for index, row_data in top_10_artists.iterrows():        rows.append(            html.Tr([                html.Td(row_data['Artist']),                html.Td(row_data['Count'])            ])        )    body = html.Tbody(rows)    return [header, body]if __name__ == '__main__':    app.run_server(debug=True)

运行此代码，您将在浏览器中看到一个Dash应用，其中包含两个下拉菜单和一个动态更新的表格。

注意事项与最佳实践

Output属性的选择: 理解dmc.Table如何接收其内容至关重要。当需要完全控制表格的HTML结构（包括

以上就是Dash Mantine组件动态表格：结合Dropdown实现交互式数据展示的详细内容，更多请关注创想鸟其它相关文章！