TypeError: Unserializable object for ipyaggrid table cell renderer

[AlesyaSeliazniova30032012]

Hi. I use "ipyaggrid" lib. I want to convert all price values to float format with 2 decimal places and add a prefix £. Please tell me what I'm doing wrong and how to fix it, that I'm getting an error TypeError: Unserializable object <function currency_renderer at 0x0000026B9F46AB60> of type <class 'function'>. Thanks for any help

def currency_renderer(params): formatted_value = "£{:.2f}".format(float(params.value)) return formatted_value
`
def create_aggrid(df):
currency_columns = ['size', 'pnl', 'commission']
column_defs = [
{
'headerName': column,
'field': column,
'cellRenderer': currency_renderer if column in currency_columns else None
}
for column in df.columns
]
grid_options = {
'columnDefs' : column_defs,
'defaultColDef': {'sortable': 'true', 'filter': 'true', 'resizable': 'true'},
}

ag_grid = grid.Grid(grid_data=df,
        export_mode="buttons",
        columns_fit='auto',
        grid_options=grid_options,
        theme='ag-theme-balham',
        keep_multiindex=False,
        center=True)

return ag_grid

`

[mariobuikhuizen]

Hi @AlesyaSeliazniova30032012,

You can't use python code here, it has to be JavaScript (see this and this).

Example:

'cellRenderer': """__js__:
        class {
            init(params) {
                const poundFormat = new Intl.NumberFormat('en-GB', {
                    style: 'currency',
                    currency: 'GBP',
                });
                const eGui = this.eGui = document.createElement('span');
                eGui.innerHTML = poundFormat.format(params.value);                           
            }

            getGui() {
                return this.eGui;
            }
        }
""" if column in currency_columns else None

[AlesyaSeliazniova30032012]

Oh.. I've never encountered JS. We need to figure it out. Thanks, it worked.

[AlesyaSeliazniova30032012]

Or maybe there is some alternative to this code for Python?

[AlesyaSeliazniova30032012]

maybe you can tell me what I wrote wrong here, because I don't own js. I want to change the style of the cells depending on the sign. Thanks

'cellClass': """__js__: 
                    class {
                        init(params) {
                            const eGui = this.eGui = document.createElement('span');
                            
                            if (params.value < 0) {
                                eGui.classList.add('negative-value');
                            } else if (params.value > 0) {
                                eGui.classList.add('positive-value');
                            }
                        }
                        
                        getGui() {
                            return this.eGui;
                        }
                    }""",

And where do I need to apply these styles?

css_rules="""
        .positive-value {
          background-color: rgba(100, 149, 237, 0.3);
        }
        .negative-value {
          background-color: rgba(255, 0, 0, 0.3);
        }
    """

[mariobuikhuizen]

Or maybe there is some alternative to this code for Python?

A cellRenderer is run on the browser where only JavaScript is available.

You could set the formatted text in the dataframe instead of the raw numbers, that can be done in Python.

[mariobuikhuizen]

maybe you can tell me what I wrote wrong here, because I don't own js. I want to change the style of the cells depending on the sign. Thanks

In this example cellClass and css_rules are used: https://widgetti.github.io/ipyaggrid/guide/create.html#multi-options

[AlesyaSeliazniova30032012]

Worked for me. Thanks
'cellClass': """function(params) { return params.value > 0 ? 'positive-value' : 'negative-value'; }""",