Value Transformers

AgGrid allow you to apply transformers based on the column of your grid. This allow you to perform operations on the data before displaying it on the grid, without having to pre-process the data on the backend, reducing the load on your application.

value_getter is a property of the column definition that allows you to define a function that will be called to get the value of the cell. This function will receive the row data as a parameter and should return the value to be displayed on the cell.

If you have two columns col_a and col_b and you want to display the sum of these two columns in a third column sum, you can define the value_getter of sum as follows:

value_formatter is a property of the column definition that allows you to define a function that will be called to format the value of the cell. This function will receive the value of the cell as a parameter and should return the formatted value to be displayed on the cell.

If you have a column price and you want to display the price with a currency symbol, you can define the value_formatter of price as follows:

Formatters and getters can be written in a few different styles. Simple inline JavaScript expressions are the most reliable and should be preferred:

Python lambdas are useful for basic type conversions — the lambda receives a params var and operates on it symbolically:

Short arrow functions can also be passed via rx.vars.FunctionStringVar:

Keep JavaScript formatters short: multi-line function bodies with complex conditionals often fail to render. If the logic doesn't fit a simple expression, compute the value on the backend instead, or use a cell renderer.

Formatters and getters are always passed directly in the column definition — they are not registered as AG Grid "components".

While formatters change the displayed text, cell_renderer replaces the cell contents with a Reflex component. The renderer is a lambda that receives the cell params and returns a component:

Renderers that use state or event handlers must be defined as an @rx.memo component. Pass it to cell_renderer through a lambda, with all arguments given by keyword — never pass the memoized function itself directly: