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

Question

I am using a valueFormatter for my date columns in ag-grid (react) that looks like this:
columnTypes: {
"dateColumn": {
filter: 'agDateColumnFilter',
enableRowGroup: true,
valueFormatter: Blotter.formatDate,
enablePivot: true,
enableValue: true
}
}
where Blotter.formatDate is a simple formatter that outputs the date in the user's preferred format. However, a common requirement in my application is to build pivot tables using a date series so the date column ends up in the "Column Labels" section of the pivot definitions. When I do this, the date column header shows the full, unformatted date and is also not sorted in any particular order. How can I make it so that the column label formats the dates in a reasonable way and have them sorted incrementing from left to right?
Here's what I'm seeing:
The dates across the top are from the "Position Date" column, which renders like this when pivot is not turned on:
Thankyou,
Troy

Answer 1

I was stuck with the same problem. I finally found the solution.
You must set the keyCreator on you column definition

Answer 2

As Olivier mentioned you can use the keyCreator property for your purpose.
But be aware when you use it together with valueFormatter, it causes a strange behaviour in your Pivot.
Here a link to the official documentation where you can find out more
https://www.ag-grid.com/angular-grid/column-properties/

Answer 3

processSecondaryColDef
"This is a callback that gets called on each group definition":
processSecondaryColGroupDef
.
Using the method above you can resolve the problem.
I fixed the same issue in my project.
From the 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;
},
};