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

1
votes

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: enter image description here

The dates across the top are from the "Position Date" column, which renders like this when pivot is not turned on:

enter image description here

Thankyou, Troy

2
ag-gridag-grid-react

2 Answers

0
votes

I was stuck with the same problem. I finally found the solution.

You must set the keyCreator on you column definition

0
votes

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