How to change a part of the header name of a particular column to lowercase in ag-grid

1
votes

I tried used headerClass but it transformed the whole header name to lower case, but only want a part of it to be lowercase.

My Code:

{ field:"id", headerName: 'RAJ(0P)' }

I want only 0P part to become lowercase.

Any suggestions would help.

Update : I saw that one class is being applied to an external component which transforms the text into uppercase. So to overwrite that I guess I need to pass custom HTML to column header and apply a class which transforms it to lowercase.

So How to pass custom HTML to column header?

2
angulartypescriptag-grid

2 Answers

1
votes

You can use the headerValueGetter callback function to format the header text however you want. You need to add it to the column definition.

For your specific problem, you can use the following column definition (apologies if not refactored, wrote it quickly):

{
      field: "RAJ(0P)",
      headerValueGetter: function(params) {
        let headerName = params.colDef.field;
        let textWithinBracket = headerName.substring(headerName.indexOf('(') + 1, headerName.indexOf(')'));

        let lcTextWithinBracket = '(' + textWithinBracket.toLowerCase() + ')';

        let finalHeaderName = headerName.replace(/\(.*?\)/, lcTextWithinBracket)

        return finalHeaderName;
      }
    }

Demo.

0
votes

have you tried using angular pipes?

in your html template when you are showing the value in let's say span you can do as follows to make your values capitalised

<span>{{ value_expression | titlecase }}</span>

The reference link is here TitleCasePipe