I have been looking into alternate CSS solutions to capitalize the first letter of headerName of columnDefs.

So here is my solution:-

Object.keys(row).forEach(field => {
   columnDef.push({
      field: field,
      headerName: this.customHeader(field)
   })
});

private customHeader(val: string): string {
   return val.charAt(0).UpperCase() + val.slice(1);
}

So is it possible to achieve capitalization [First letter capital and rest would be small letter] using CSS styling only for Header names in the grid.

My approach for this was:-

columnDef.push({
      field: field,
      headerName: this.customHeader(field),
      cellStyle: { color: red, textTransform: 'capitalize' }
   })

By adding cellStyle CSS styling didn't work. Two observations done here is:-

1. color red got applied to all the cells except header of the grid.
2. textTranform is not even applied

Please help! Thanks a lot in advance