如何用Dash Mantine Components结合Dropdown实现动态Top10歌手表格？

问题根源分析 #

两段代码的核心问题都是没正确理解dmc.Table的属性规则：

1. 第一段代码误用html组件构建表格结构，且错误指定了table属性（dmc.Table无此属性），同时返回的嵌套结构不符合组件要求。
2. 第二段代码返回了字典列表，但未配合dmc.Table的columns属性配置，导致数据无法渲染。

正确实现方案 #

以下提供两种可行的实现方式，均能根据下拉框选中的流派/子流派动态更新Top10歌手表格：

方式1：使用dmc.Table的data+columns属性（推荐，代码更简洁）

先在布局中定义好dmc.Table的列配置，回调返回格式化后的数据集即可：

布局代码

from dash import Dash, dcc, html, Input, Output
import dash_mantine_components as dmc
import pandas as pd

# 加载本地数据集
data = pd.read_csv("30000-spotify-songs.csv")

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    children=[
        dcc.Dropdown(
            id="genre-dropdown",
            options=[{"label": g, "value": g} for g in data['Genre'].unique()],
            placeholder="选择流派"
        ),
        dcc.Dropdown(
            id="subgenre-dropdown",
            options=[{"label": sg, "value": sg} for sg in data['Subgenre'].unique()],
            placeholder="选择子流派"
        ),
        # 定义带列配置的dmc.Table
        dmc.Table(
            id="top_10_artists",
            columns=[
                {"accessor": "Artist", "title": "歌手"},
                {"accessor": "Number of songs", "title": "歌曲数量"}
            ],
            data=[]  # 初始空数据
        )
    ]
)

回调代码

@app.callback(
    Output("top_10_artists", "data"),
    Input("genre-dropdown", "value"),
    Input("subgenre-dropdown", "value"),
    prevent_initial_call=True  # 避免初始无选中值时触发错误
)
def update_top_artists(genre, subgenre):
    # 筛选指定流派&子流派的数据
    sub_df = data[(data['Genre'] == genre) & (data['Subgenre'] == subgenre)]
    # 统计Top10歌手，手动重命名列避免歧义
    top_artists = sub_df['Artist'].value_counts().reset_index()
    top_artists.columns = ['Artist', 'Number of songs']
    top_artists = top_artists.head(10)
    # 转换为字典列表返回给组件
    return top_artists.to_dict('records')

方式2：使用dmc.Table的children属性自定义表格结构

如果需要更灵活的样式控制，可手动构建表头和表体：

布局代码

# 布局中仅定义空的dmc.Table
dmc.Table(id="top_10_artists")

回调代码

@app.callback(
    Output("top_10_artists", "children"),
    Input("genre-dropdown", "value"),
    Input("subgenre-dropdown", "value"),
    prevent_initial_call=True
)
def update_top_artists(genre, subgenre):
    sub_df = data[(data['Genre'] == genre) & (data['Subgenre'] == subgenre)]
    top_artists = sub_df['Artist'].value_counts().reset_index()
    top_artists.columns = ['Artist', 'Number of songs']
    top_artists = top_artists.head(10)
    
    # 构建表头
    header = dmc.TableThead(
        dmc.TableTr(
            [
                dmc.TableTh("歌手"),
                dmc.TableTh("歌曲数量")
            ]
        )
    )
    
    # 循环构建表体行
    rows = []
    for _, row in top_artists.iterrows():
        table_row = dmc.TableTr(
            [
                dmc.TableTd(row['Artist']),
                dmc.TableTd(row['Number of songs'])
            ]
        )
        rows.append(table_row)
    
    body = dmc.TableTbody(rows)
    
    # 返回完整的表格子组件列表
    return [header, body]

关键注意点 #

• 手动重命名value_counts后的列，避免不同pandas版本导致的列名差异（比如旧版返回count，新版可能返回Artist_count）。
• 启用prevent_initial_call=True，避免初始加载时下拉框无选中值引发的筛选错误。
• 构建表格结构时，必须使用dmc.TableThead、dmc.TableTr等专属组件，不要混用原生html的表格组件。

内容的提问来源于stack exchange，提问作者sroverto