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.

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.

• angular
• localization
• ag-grid
• customization
• ag-grid-angular

1 Answer 1

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,
  }
  ...
];