Search code examples
ag-gridag-grid-react

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

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

Solution
    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;
  },
};