How can I customize header in Pivot mode?

Question

I'm using AG Grid enterprise and I cannot find the option to replicate headerRenderer property when using pivot mode. In the linked Plunkr, I'm altering the component just fine for the 'year' column (red border + different text):

But the second I enter the Pivot mode, customized header is lost (here, the 'year' header is represented by '2020' and '2020' columns):

Here is the Plunkr

I've tested headerComponent with some other combinations pivot and rowGrouping flags but nothing seem to unlock the header component customization. Is it even possible to do with AG Grid?

Answer 1

I think you're looking for the processPivotResultColGroupDef property. With this, you can customise the year header when in pivot mode.

For example, add the following to your React Grid:

processPivotResultColGroupDef={processPivotResultColGroupDef}

With the following function:

  const processPivotResultColGroupDef = function(colGroupDef) 
  {
    colGroupDef.headerClass = 'grouped-header';
    colGroupDef.headerName = 'Year ' + colGroupDef.headerName;
  }

Demo.