Ag-Grid透视模式下带列分组时自定义排序比较器失效

我在Ag-Grid实现了支持普通模式和透视（pivot）模式的数据表，给某字符串列配置了自定义排序比较器，普通模式下正常工作，但切换到透视模式并选中该列排序时，排序逻辑变成了字母顺序，而非自定义规则。

我参照官方的自定义分组排序示例配置后，发现分组模式下该比较器根本不会触发。当前使用Ag-Grid版本为25.2.0，依赖包含@ag-grid-community/react和@ag-grid-enterprise/all-modules。

相关代码片段 #

导入部分

import { AgGridReact } from '@ag-grid-community/react';
import {
  AllModules,
  ColDef,
  Column,
  ColumnApi,
  FilterChangedEvent,
  FirstDataRenderedEvent,
  GridApi,
  GridReadyEvent,
  ColumnVisibleEvent,
  ColumnValueChangedEvent
} from '@ag-grid-enterprise/all-modules';

列定义

const defaultColDef = useMemo<ColDef>(() => {
  return {
    flex: 1,
    sortable: true,
    resizable: true,
    filter: true,
    enableRowGroup: true,
    enablePivot: true,
    cellClass: 'stringType',
  };
}, []);

const autoGroupColumnDef = useMemo<ColDef>(() => {
  return {
    minWidth: 250,
  };
}, []);

const[columnDefs, setColumnDefs] = useState<ColDef[]>([
  {
    headerName: "Year",
    field: 'year',
    cellClass: 'numberType',
  },
  {
    headerName: "Fruit",
    field: 'fruit',
    filter: 'agSetColumnFilter',
    rowGroup: true,
    comparator: (a, b) => {
      const fruitListSortOrder = [
        'Banana',
        'Orange',
        'Apple',
        'Lemon',
        'Watermelon',
        'Papaya',
      ];
      return fruitListSortOrder.indexOf(a) - fruitListSortOrder.indexOf(b);
    },
  },
  {
    headerName: "Value",
    field: "value",
    enableValue: true,
    enableRowGroup: false,
    enablePivot: false,
    aggFunc: "sum",
    filter: "agNumberColumnFilter",
  },
]);

AgGrid React组件

<AgGridReact
  modules={AllModules}
  defaultColDef={defaultColDef}
  columnDefs={columnDefs}
  autoGroupColumnDef={autoGroupColumnDef}
  sideBar
  onGridReady={onGridReady}
  rowData={rowData}
/>

我在比较器里加了console.log，普通模式排序时会打印，但分组/透视模式下完全没输出，说明比较器没被调用。

解决方案 #

问题核心：分组/透视模式下，实际排序的是聚合后的分组行，此时排序逻辑由autoGroupColumnDef控制，原列的comparator只作用于普通行数据，不会影响分组行排序。

修改autoGroupColumnDef，添加匹配原列的自定义比较器：

const autoGroupColumnDef = useMemo<ColDef>(() => {
  return {
    minWidth: 250,
    comparator: (a, b) => {
      const fruitListSortOrder = [
        'Banana',
        'Orange',
        'Apple',
        'Lemon',
        'Watermelon',
        'Papaya',
      ];
      return fruitListSortOrder.indexOf(a) - fruitListSortOrder.indexOf(b);
    }
  };
}, []);

如果需要复用排序逻辑，可抽成独立函数：

const fruitComparator = (a: string, b: string) => {
  const fruitListSortOrder = [
    'Banana',
    'Orange',
    'Apple',
    'Lemon',
    'Watermelon',
    'Papaya',
  ];
  return fruitListSortOrder.indexOf(a) - fruitListSortOrder.indexOf(b);
};

// 原列定义保留comparator
const[columnDefs, setColumnDefs] = useState<ColDef[]>([
  {
    headerName: "Fruit",
    field: 'fruit',
    filter: 'agSetColumnFilter',
    rowGroup: true,
    comparator: fruitComparator,
  },
  // ...其他列
]);

// autoGroupColumnDef复用同一比较器
const autoGroupColumnDef = useMemo<ColDef>(() => {
  return {
    minWidth: 250,
    comparator: fruitComparator
  };
}, []);

调整后，分组/透视模式下的排序会遵循自定义规则，和普通模式保持一致。

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