Ag-grid valueFormatter and grid width

Hi!

I’m currently working with Dash Ag-Grid and I’ve set up a valueFormatter as follows:

base_colDef = {
    "type": "rightAligned",
    "valueFormatter": {"function": "Number(params.value).toFixed(1) + ' %'"}
}

This setup formats every cell in the column, even if its value is blank or null, converting those cells to “0.0%”. I’d like to conditionally format the cells, such that only cells with actual numbers get the percentage formatting, while blank or null cells remain unformatted.

Has anyone encountered this and found a solution? Any guidance would be appreciated!

Also, on a separate matter, is there a way to auto update the grid width? If I change the browser size the grid shrinks altogether, when I expand the window back the grid would expand but the columns would stay shrank. Same happens here: Dash - you need two clicks on default size to change back to original size after changing size.

David

Hello @davzup89,

To make it so that the grid doesn’t do things with blanks, you can use:

params.value ? Formatfunction : null

As far as having the columns change size, I recommend using flex in the column defs, this will auto size based upon the grid total size.

It’s also good to pair this with a minWidth, otherwise you won’t be able to see the columns on very small screens.

2 Likes

Thanks. I tried this implementation

    "valueFormatter": {
        "function": """
        return params.value ? Number(params.value).toFixed(1) + ' %' : null;
        """
    }

but it would just leave everything unformatted in this case, even cells with values. Have I overlooked something?

Should be something like this:

"valueFormatter": {
        "function": """
        params.value ? Number(params.value).toFixed(1) + ' %' : null;
        """
    }

If that doesn’t work, then you probably need to make sure the params.value equal whatever you are running into.

You can always use the log function we built to see what the params are.

Great, it works. Interesting still that now it won’t format nulls as well as number 0.

Yeah, you have to do this:

"valueFormatter": {
        "function": """
        (params.value || params.value == 0) ? Number(params.value).toFixed(1) + ' %' : null;
        """
    }

0 defaults to bit behavior, where 0 is false and 1 is true.

1 Like

Thank you for your help!

1 Like

I am trying to implement a similar thing like this. But it does not work.

locale_de = """d3.formatLocale({
              "decimal": ",",
              "thousands": "\u00a0",
              "grouping": [3],
              "currency": ["", "\u00a0€"],
              "percent": "\u202f%",
              "nan": ""
            })"""
"valueFormatter": {
                                   "function": """
                                       (params.value || params.value == 0) ? f"{locale_de}.format(".2f")(params.value) : null;
                                       """
                               }

if I use it as follows it formats all cells including the empty ones:

"valueFormatter": {"function": f"{locale_de}.format('.2%')(params.value)"},

Thanks in advance for your help

Is just might be a typo, but try putting single quotes around the '.2f'

You should be doing it like this:

"valueFormatter": {
                                   "function": f"""
                                       (params.value || params.value == 0) ? {locale_de}.format(".2f")(params.value) : null;
                                       """
                               }

The way you had it, once in js would have read like this:

 (params.value || params.value == 0) ? f"{locale_de}.format(".2f")(params.value)

Which would result in a syntax error. You can always check the browser console to see errors. :slight_smile:

Thank you very much. It works!

1 Like