Ag-grid valueFormatter and grid width

Dash Python
1

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

2

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.

1 Like
3

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?

4

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.

5

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

6

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
7

Thank you for your help!

1 Like