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.

Continue reading...