Ag-Grid side bar column names uses fixed headerName string, how to customize?

We are using AgGrid in our (new) Angular single page application. I run into the following problem with the headerName in the sidebar:

For the table header, we use a custom component to translate the headerName property value. This works as expected and the grid shows the translated value (Transloco). The custom component is set as headerComponentParams.innerHeaderComponent. Different story for the sidebar. The label seems to be pulled directly from the headerName of the column definition. I looked through the documentation, but it seems there is no way of customizing, use a custom component or hook in any other way to translate/adjust the headerName before it is used as lable in the sidebar.

The column definition passed to <ag-grid-angular ..../>:

  {
    field: 'createdDate',
    headerName: 'common.createdDate',
    filter: 'agDateColumnFilter',
    headerComponentParams: {
      innerHeaderComponent: GridTranslateHeaderComponent,
    },
    valueFormatter: gridDateFormatter,
  },

The custom innerHeaderComponent (works as expected):

@Component({
  selector: 'lrr-grid-translate-header',
  template: `<span>{{ label | transloco }}</span>`,
  imports: [TranslocoPipe],
})
export class GridTranslateHeaderComponent implements IHeaderAngularComp {
  protected label = '';

  agInit(params: IHeaderParams): void {
    this.label = params.displayName;
  }
  refresh(params: IHeaderParams): boolean {
    this.label = params.displayName;
    return true;
  }
}

I really would like to implement this sidebar translation in a centralized and reusable way, like we did in the GridTranslateHeaderComponent for the actual grid column header.

Edit: Right now, the table header is runtime translated, and the user can change language at runtime => the header name gets translated to the selected language. Preferably this is the behavior for the label used in the side tool panel as well.

You can use the headerValueGetter option and provide a label which will be used in both column header and sidebar. You can even have different labels displayed in the column header and sidebar for the same column.

Check this example code from this demo:

In the column header, the label is displayed as H Country and in the sidebar, the label is displayed as TP Country.

function countryHeaderValueGetter(params: HeaderValueGetterParams) {
  switch (params.location) {
    case "csv":
      return "CSV Country";
    case "columnToolPanel":
      return "TP Country";
    case "columnDrop":
      return "CD Country";
    case "header":
      return "H Country";
    default:
      return "Should never happen!";
  }
}

The above function is supplied to the headerValueGetter option in the column definition.

columnDefs: ColDef[] = [
  ...
  {
      field: "country",
      minWidth: 200,
      enableRowGroup: true,
      enablePivot: true,
      headerValueGetter: countryHeaderValueGetter,
  }
  ...
];

Update based on the comment:

You can use the Grid API's refreshHeader function to trigger re-rendering the header names. This will work with on-fly language translation. You need to call this function when the user changes the language.

From the refreshHeader docs:

Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.