Limit decimal places in Dash AG Grid

Dash Python
1

Hi,

I have a column in a grid with numbers (eg: 1.56789). How can I limit it to a certain number of decimal points?

1 Like
2

Can you try to use valueFormatter in your code. Something as below:

columnDefs = [{
    'field': 'col2',
    'valueFormatter': {"function":"""d3.format(",.5f")(params.value)"""}}]
4 Likes
3

Hmm. Neither of the following is achieving 1 decimal place for me. Despite other colDef customizations working as expected.

{"function": "d3.format(',.1f')(params.value)"},
{"function":"""d3.format(",.1f")(params.value)"""}

I had high hopes for ag_grid, but now I have lost 2-3 hours on formatting strings, links, column headers, etc… and I’m not even half way to the way I want my table formatted + the table isn’t responsive like a basic div would be

4

Hi @HashRocketSyntax

Did you try running the example below from the docs?
Can you say more about the responsiveness? There are a lot of ways to configure the grid for that.

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

rowData = [
    dict(account='A', quantity=522.31, balance=522.31, rate=0.139),
    dict(account='B', quantity=1607.9, balance=1607.9, rate=0.104444),
    dict(account='C', quantity=-228.41, balance=-228.41, rate=0.19999),
]

columnDefs = [
    {"field": "account"},
    {
        "field": "quantity",
        "valueFormatter": {"function": "d3.format(',.1f')(params.value)"},
    },
    {
        "field": "balance",
        "valueFormatter": {"function": "d3.format('($,.2f')(params.value)"},
    },
    {
        "field": "rate",
        "valueFormatter": {"function": "d3.format(',.1%')(params.value)"},
    }
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="d3-value-formatters-number-formatting-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            defaultColDef={"type": "rightAligned", "editable": True},
            dashGridOptions={"singleClickEdit": True},
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)
5

@AnnMarieW Thank you. It was my fault; I messed something up in the conditions for formatting individual columns.

To that end, I imagine people will want to apply similar formats to their dtypes (float, int, str), so it could save time if there was an argument that accepted a dict for that.

Since you asked about the responsiveness, if I make my browser wider, then columns stay the same width. I haven’t looked into alternatives to columnSize="sizeToFit" or potential css problems.

image
image978×190 21.4 KB

6

sizeToFit calls the api once, responsiveSizeToFit calls the api after every adjustment.

However, I highly recommend just passing flex:1 to your columnDefs as this is native to AG grid and will give you even more control over the width that individual columns take up.

2 Likes
7

@jinnyzor thank you. there is less lag in the resizing when using flex:1

2 Likes
8

Hey @HashRocketSyntax, have you tried using columnTypes?

You can also customize the Cell Data Types

2 Likes