如何在AG Grid中动态调整透视列的排序顺序

你的fiscalPeriod列作为pivot列当前默认升序排列，以下是两种实现降序/动态切换排序的方案：

一、设置默认降序初始化 #

直接在fiscalPeriod的列定义中添加sort: 'desc'属性，同时为避免格式化后的字符串导致排序偏差，添加自定义比较器基于原始日期值排序：

ColumnDef = [
  { field: 'name', rowGroup: true},
  { 
    field: 'fiscalPeriod',
    pivot: true,
    sortable: true,
    sort: 'desc', // 配置默认降序
    valueGetter: params => { 
      return new Date(params.data.fiscalPeriod).toLocaleDateString('fa-IR', { year: 'numeric', month: 'numeric' });
    },
    // 自定义比较器，基于原始日期时间戳排序
    comparator: (valueA, valueB, nodeA, nodeB) => {
      const dateA = new Date(nodeA.data.fiscalPeriod);
      const dateB = new Date(nodeB.data.fiscalPeriod);
      return dateA.getTime() - dateB.getTime();
    }
  },
  {
    field: 'hValue',
    aggFunc: 'sum',
    width: 80,
    valueFormatter: this.utilService.percentandNegativeFormatter,
  },
  {
    field: 'value',
    aggFunc: 'sum',
    width: 150,
    valueFormatter: this.utilService.negativeFormatter,
  },
];

二、动态切换排序方向 #

如果需要在运行时切换升序/降序，通过AG Grid API实现：

1. 先保存Grid API引用（通过gridReady事件）：

onGridReady(params) {
  this.gridApi = params.api;
}

2. 添加切换按钮的事件处理函数：

toggleFiscalPeriodSort() {
  const targetColumn = this.gridApi.getColumn('fiscalPeriod');
  if (!targetColumn) return;

  const currentSort = targetColumn.getSort();
  const newSort = currentSort === 'asc' ? 'desc' : 'asc';

  // 更新排序模型
  this.gridApi.setSortModel([{ colId: 'fiscalPeriod', sort: newSort }]);
}

3. 模板中添加切换按钮：

<button (click)="toggleFiscalPeriodSort()">切换财期列排序</button>

注意事项 #

• 必须启用pivotMode：在gridOptions中设置pivotMode: true，否则pivot列不会生效；
• 自定义比较器不可省略：由于valueGetter返回的是格式化后的字符串，直接按字符串排序可能出现逻辑错误，基于原始日期对象的比较能保证排序准确性。

内容的提问来源于stack exchange，提问作者Z.Mg