In Ag grid Angular how to capitalize First letter of columnDefs

Question

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

Answer 1

Ag-Grid has a feature to capitalise the field name using the field value. So if you do not pass anything as headerName Ag-Grid will automatically take your field name and capitalise the first character.

Therefore one solution is not to provide any value for headerName just provide field parameter.

Also check this link for more elaborate details

Answer 2

This isn't some special React thing. It's basic JavaScript. Objects are usually destructured like this:

const { age } = {
  name: "John",
  age: 23
};

console.log(age);

However, what if you don't want to use the given name in the object but assign it a custom name, still with object destructuring?

Remember in import statements you could do

import something as smt from './something';

What if you wanted to call age userAge? You can do something similar:

const { age: userAge } = { age: 23 };

console.log(userAge);

That's what's going on. Take a regular function:

function myFunc(obj) {
  console.log(obj.name);
}

myFunc({ name: "hello" });

You could do:

function myFunc({ name }) {
  console.log(name);
}

myFunc({ name: "hello" });

But if you wanted to name it something else, the right hand side would rename it:

function myFunc({ name: objName }) {
  console.log(objName);
}

myFunc({ name: "hello" });

In your example, the parameter was renamed to it's PascalCase equivalent because that's the naming convention for React components.

Answer 3

Typically in HTML we use lowercase words for parameters or attributes, and an upper-case first letter for elements. So this looks normal and correct:

<Splitscreen left=xxx right=yyy>

It would look odd to have the parameters with an upper first letter like this:

<Splitscreen Left=xxx Right=yyy>

Now inside of the Splitscreen implementation we want to use left and right as HTML elements so the author wanted to maintain the convention and call them Left and Right when using them because this would look wrong:

    <Container>
      <Pane>
        <left />            <--- just looks odd
      </Pane>
      <Pane>
        <right />           <--- just looks odd
      </Pane>
    </Container>

Using destructuring with renaming is an easy way to assign left to Left and right to Right and avoids having bulky extra lines of code like this:

export const Splitscreen = ({ left, right }) => {
  const Left = left;
  const Right = right;
  return (...)