Dash中实现Dataframe转带颜色格式的Dash Table并调整间距

1. 适配多层列索引到dash_table #

dash_table原生不直接支持多层表头，需先将DataFrame的多层列索引转换为组件可识别的格式，同时开启merge_duplicate_headers=True实现表头合并效果：

# 处理多层列索引
columns = []
for col_tuple in df.columns:
    columns.append({
        "name": list(col_tuple),  # 保留多层索引层级作为表头名称
        "id": "_".join(map(str, col_tuple))  # 生成唯一列ID，避免冲突
    })

2. 实现正负数值的颜色区分 #

利用style_data_conditional参数设置条件格式，对正数和负数分别应用绿色、红色文本：

style_data_conditional = []
for col in columns:
    # 正数显示绿色
    style_data_conditional.append({
        "if": {
            "filter_query": "{{{col_id}}} > 0".format(col_id=col["id"]),
            "column_id": col["id"]
        },
        "color": "green"
    })
    # 负数显示红色
    style_data_conditional.append({
        "if": {
            "filter_query": "{{{col_id}}} < 0".format(col_id=col["id"]),
            "column_id": col["id"]
        },
        "color": "red"
    })

3. 优化样式解决内容紧凑问题 #

通过调整表格整体、单元格、表头的内边距和边框样式，提升内容间距和可读性：

# 表格整体样式
style_table = {
    "overflowX": "auto",  # 适配宽表横向滚动
    "padding": "10px"  # 表格与外部元素的间距
}

# 单元格样式
style_cell = {
    "padding": "12px 15px",  # 增大单元格内边距，解决紧凑问题
    "textAlign": "center",  # 可选：文本居中对齐
    "border": "1px solid #ddd"  # 添加单元格边框，增强分隔感
}

# 表头样式
style_header = {
    "padding": "12px 15px",  # 表头内边距与单元格一致
    "backgroundColor": "#f8f9fa",
    "fontWeight": "bold",
    "border": "1px solid #ddd"
}

完整示例代码 #

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

# 构造多层列索引的示例DataFrame
df = pd.DataFrame(
    [[10, -5, 3], [-2, 7, -1]],
    columns=pd.MultiIndex.from_tuples([
        ("A", "数值1"), ("A", "数值2"), ("B", "数值3")
    ])
)

# 处理多层列索引
columns = []
for col_tuple in df.columns:
    columns.append({
        "name": list(col_tuple),
        "id": "_".join(map(str, col_tuple))
    })

# 正负数值颜色格式
style_data_conditional = []
for col in columns:
    style_data_conditional.append({
        "if": {
            "filter_query": "{{{col_id}}} > 0".format(col_id=col["id"]),
            "column_id": col["id"]
        },
        "color": "green"
    })
    style_data_conditional.append({
        "if": {
            "filter_query": "{{{col_id}}} < 0".format(col_id=col["id"]),
            "column_id": col["id"]
        },
        "color": "red"
    })

# 样式优化
style_table = {
    "overflowX": "auto",
    "padding": "10px"
}
style_cell = {
    "padding": "12px 15px",
    "textAlign": "center",
    "border": "1px solid #ddd"
}
style_header = {
    "padding": "12px 15px",
    "backgroundColor": "#f8f9fa",
    "fontWeight": "bold",
    "border": "1px solid #ddd"
}

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        data=df.to_dict("records"),
        columns=columns,
        merge_duplicate_headers=True,
        style_data_conditional=style_data_conditional,
        style_table=style_table,
        style_cell=style_cell,
        style_header=style_header,
        editable=False,
        sort_action="native"
    )
])

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

内容的提问来源于stack exchange，提问作者Đỗ Văn Thắng