将数据透视表 table 上的列 Header 格式化为 ag-grid 中的日期

Question

我在 ag-grid（反应）中为我的日期列使用 valueFormatter，如下所示：

columnTypes: {
                "dateColumn": {
                    filter: 'agDateColumnFilter',
                    enableRowGroup: true,
                    valueFormatter: Blotter.formatDate,
                    enablePivot: true,
                    enableValue: true                 
                }
}

其中 Blotter.formatDate 是一个简单的格式化程序，它以用户首选的格式输出日期。但是，我的应用程序中的一个常见要求是使用日期系列构建数据透视表，以便日期列最终出现在数据透视定义的 "Column Labels" 部分中。当我这样做时，日期列 header 显示完整的、未格式化的日期，并且也没有按任何特定顺序排序。我怎样才能使列标签以合理的方式格式化日期并让它们从左到右递增排序？

这是我看到的：

顶部的日期来自 "Position Date" 列，当数据透视未打开时呈现如下：

谢谢，特洛伊

Answer 1

我遇到了同样的问题。我终于找到了解决方案。

您必须在列定义中设置 keyCreator

Answer 2

正如 Olivier 提到的，您可以根据自己的目的使用 keyCreator 属性。

但请注意，当您将它与 valueFormatter 一起使用时，它会导致您的 Pivot 出现奇怪的行为。

这里是 link 官方文档，您可以在其中找到更多信息

https://www.ag-grid.com/angular-grid/column-properties/

Answer 3

processSecondaryColDef
“这是在每个组定义上调用的回调”： processSecondaryColGroupDef . 使用上面的方法可以解决问题。我在我的项目中解决了同样的问题。

来自link：

// This is a callback that gets called on each column definition
  processSecondaryColDef: function (colDef) {
    colDef.headerName = colDef.headerName.toUpperCase();
  },

  processSecondaryColGroupDef: function (colGroupDef) {
    if (colGroupDef.pivotKeys[0] === '2002') {
      colGroupDef.headerClass = 'color-background';
    }
    colGroupDef.headerName = 'Year ' + colGroupDef.headerName;
  },
};

将数据透视表 table 上的列 Header 格式化为 ag-grid 中的日期

Format Column Header on pivot table as date in ag-grid

ag-grid

ag-grid-react