Please add ValueFormatter to ColumnDef

[latze123]

Hi Reflex team, Thanks a lot for the Ag Grid implementation, it's very helpful! Would it be possible to also add the valueFormatter parameter for ColumnDef, please? Displaying data in a grid looks so much better if its formatted properly.

https://www.ag-grid.com/javascript-data-grid/value-formatters/

Probably we could pass it something like this then (took it from a Discord discussion), which I use for formatting data in an rx.table already?

@var_operation
def two_decimal_points(value: NumberVar):
    return var_operation_return(
        js_expression=f"(new Intl.NumberFormat('de-DE', {{minimumFractionDigits: 2, maximumFractionDigits: 2}}).format({value}))",
        var_type=str,
    )

[Lendemor]

I think, from some previous experimentation, you can already pass value_formatter to column_def even if it's not defined (but it won't be suggested by pylance)

We'll try and add this soon.

[latze123]

Thanks for the swift reply @Lendemor !

Worked like this as part of column_def: value_formatter="new Intl.NumberFormat('de-DE').format(value)"

[skewed91]

@latze123, do you mind elaborating how you got it to work. I'm trying to format one of the columns as currency for instance ($1,234) and am struggling a bit.

[latze123]

@skewed91 yes, it was pretty much as written above. Here's my code in detail:

if self._costcenters and self._grid_columns == []: for cc in self._costcenters: self._grid_columns.append(ag_grid.column_def(field=cc, header_name=f"CC {self._costcenters[cc]}", type="numericColumn", filter=ag_grid.filters.number, value_formatter=rx.Var("new Intl.NumberFormat('de-DE').format(value)")))

I'm running it on_mount to dynamically add columns to an ag-grid based on the state var _costcenters.

Personally, I don't know much JavaScript, but ChatGPT tells me this code for value_formatter to make it look like your example above:

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(value)

[skewed91]

Thanks for the prompt response @latze123!

I get the following error using the code above:

ReferenceError: value is not defined

I'm not a JavaScript guy myself, so not sure how the ".format(value)" is supposed to work on the cell value!

Thanks!

[latze123]

Unfortunately can't help with that, as I don't know anything further about it - only can tell that my code (the original one with the cost centers) works for me. Sorry!