AG-Grid分组列自定义排序求助：基于指定列表排序失败

你的代码问题出在自定义comparator的配置位置不对：当使用rowGroup进行分组时，AG-Grid会自动生成一个分组列（就是显示"Sport (custom order)"的列），分组后的排序逻辑是由这个自动分组列的comparator控制的，而不是你设置了rowGroup: True的原sport列。你把comparator加在隐藏的sport列上，分组列根本不会读取这个配置，所以自定义排序没生效。

修复步骤 #

把自定义comparator逻辑移到auto_group_def（也就是autoGroupColumnDef）中，同时可以保留原sport列的sort配置来触发初始排序：

完整修复代码 #

import dash
from dash import html
import dash_ag_grid as dag
import pandas as pd, json

SPORT_ORDER = ["Swimming", "Gymnastics", "Speed Skating"]

# 自定义比较函数，逻辑不变
_value_comparator = {
    "function": f"""
      function(a, b) {{
        const order = {json.dumps(SPORT_ORDER)};
        const ia = order.indexOf(a), ib = order.indexOf(b);
        if (ia < 0 && ib < 0) return 0;
        if (ia < 0) return 1;
        if (ib < 0) return -1;
        return ia - ib;
      }}
    """
}

df = pd.DataFrame({
    "athlete": ["Michael Phelps","Aleksey Nemov","Cindy Klassen",
                "Nastia Liukin","test","test2"],
    "sport":   ["Swimming","Speed Skating","Gymnastics",
                "Gymnastics","Swimming","Swimming"],
    "gold":    [8,2,1,1,2,3],
})

column_defs = [
    {
        "field": "sport",
        "rowGroup": True,
        "hide": True,
        "sortable": True,
        "sort": "asc",  # 触发初始排序方向
    },
    {"field": "athlete", "minWidth": 150},
    {"field": "gold", "aggFunc": "sum", "width": 90},
]

auto_group_def = {
    "headerName": "Sport (custom order)",
    "cellRenderer": "agGroupCellRenderer",
    "cellRendererParams": {"suppressCount": True},
    "comparator": _value_comparator,  # 把comparator移到这里！
}

app = dash.Dash(__name__)
app.layout = html.Div(
    dag.AgGrid(
        rowData=df.to_dict("records"),
        columnDefs=column_defs,
        defaultColDef={"resizable": True, "filter": True},
        dashGridOptions={
            "groupDisplayType": "singleColumn",
            "rowGroupPanelShow": "always",
            "autoGroupColumnDef": auto_group_def,
        },
        enableEnterpriseModules=True,
        dangerously_allow_code=True,
        style={"height": 400, "width": 600},
    )
)

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

额外说明 #

• 确保dangerously_allow_code=True开启，否则自定义JS函数无法生效
• 当用户点击分组列表头切换排序时，这个comparator也会生效，保持自定义顺序的正/反向排序
• 如果有多个rowGroup层级，每个层级的排序都需要对应配置到autoGroupColumnDef或者对应分组列的comparator中

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