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

user_10502710 0
Viewed 730

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

ag-grid-react ag-grid
3 Answers

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

You must set the keyCreator on you column definition

user_146616400

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

user_95228880
  1. processSecondaryColDef
  2. "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;
  },
};
user_177376890
Related