多级索引DataFrame转换为Dash Table的最优实现方案

你现有带两级列头的DataFrame示例如下：

核心实现逻辑 #

Dash DataTable原生支持多级表头渲染，只需要正确配置列参数并开启表头合并开关即可，完整实现代码如下：

import dash
from dash import dash_table, html
import pandas as pd

# 假设df2为你现有的两级列索引DataFrame
# 1. 构造列配置：name传两级列名数组，id用两级列名拼接保证唯一性
columns = [
    {
        "name": [top_col, sub_col],
        "id": f"{top_col}_{sub_col}"
    } for top_col, sub_col in df2.columns
]

# 2. 打平DataFrame列名，和上面的id一一对应
df_render = df2.copy()
df_render.columns = [f"{top}_{sub}" for top, sub in df2.columns]

# 3. 实例化Dash应用并渲染表格
app = dash.Dash(__name__)
app.layout = html.Div([
    dash_table.DataTable(
        data=df_render.to_dict("records"),
        columns=columns,
        merge_duplicate_headers=True, # 关键参数：自动合并相同的顶层表头
        # 可选样式优化
        style_header={
            "textAlign": "center",
            "fontWeight": "bold"
        },
        style_cell={
            "textAlign": "center",
            "padding": "8px"
        }
    )
])

if __name__ == "__main__":
    app.run_server(debug=True)

原代码问题说明 #

你之前的写法存在两个问题：

• 直接删除DataFrame的第二级列名，如果存在同名顶层列会导致列ID重复，数据匹配错误
• 没有开启merge_duplicate_headers参数，Dash默认不会合并相同顶层表头，导致表头展示异常

如果你的顶层列名全部唯一，也可以简化ID配置，直接用顶层列名作为ID，保证数据和列配置一一对应即可。

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