如何在Dash的Graph Objects Table中实现用户自定义表格排序？

• 核心思路：通过dcc.Dropdown提供列选择入口，利用Dash回调函数监听选择变化，对原始DataFrame排序后重新渲染表格。

完整代码实现 #

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd

# 替换成你的原始DataFrame
df = pd.DataFrame({
    'col_1': [3, 1, 4, 2],
    'col_2': ['Apple', 'Banana', 'Cherry', 'Date'],
    'col_3': [10, 5, 15, 8],
    'col_4': [True, False, True, False]
})

app = dash.Dash(__name__)

# 页面布局：下拉选择框 + 表格容器
app.layout = html.Div([
    dcc.Dropdown(
        id='sort-col-picker',
        options=[{'label': col, 'value': col} for col in df.columns],
        value='col_1',  # 默认选中第一列
        clearable=False,
        style={'width': '300px', 'margin': '20px 0'}
    ),
    dcc.Graph(id='sorted-table')
])

# 回调函数：根据选中列排序并更新表格
@app.callback(
    Output('sorted-table', 'figure'),
    Input('sort-col-picker', 'value')
)
def refresh_sorted_table(target_col):
    # 按选中列升序排序，改为ascending=False可切换降序
    sorted_df = df.sort_values(by=target_col, ascending=True)
    
    # 沿用你原有的表格样式配置
    layout_max = go.Layout(margin=dict(l=20, r=20, t=20, b=20))
    table_fig = go.Figure(data=[go.Table(
        columnwidth=[80, 400, 80, 80],
        header=dict(
            values=['col_1', 'col_2', 'col_3', 'col_4'],
            fill_color=px.colors.qualitative.Pastel2[6],
            align='left'
        ),
        cells=dict(
            values=[sorted_df['col_1'], sorted_df['col_2'], sorted_df['col_3'], sorted_df['col_4']],
            fill_color=px.colors.qualitative.Pastel1[8],
            align='left',
            height=70
        )
    )], layout=layout_max)
    
    return table_fig

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

关键细节说明 #

• 下拉选择框自动读取DataFrame列名生成选项，用户选择后立即触发回调更新表格。
• 排序逻辑可灵活调整：修改sort_values的ascending参数即可切换升降序。
• 表格样式完全复用你原有的配置，仅替换数据源为排序后的DataFrame，保证视觉一致性。

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