Why Value Formatter gets Applied to the Cell but the Displayed Value does Not Change ag-grid

I do have the following column and function in my ag-grid:

  ngOnInit(): void {

            this.columnDefs = [
                {
                headerName: 'Header', field: 'quantity',
                valueFormatter: (params) => this.numberFormatter(params),
                }
        ];
   }

  numberFormatter(params){
    console.log(params.value);
    return '$'+params.value;
  }

No matter what changes make to the current value inside the numberFormatter() function, no changes are displayed in the table.

The changes however are visible and returned correctly within numberFormatter() method.

What am I missing?

Seems your data is not presented (or field quantity doesn't exist in your data)

You have to define it correctly and it should work as expected

Here exact same DEMO which works

you don't need to execute anonymous function in valueFormatter definition, you can just assign the function

valueFormatter: this.numberFormatter.bind(this)

it doesn't affect on result