Percentage format in Dash data table multiplies the numbers by 100

Dash Python
1

Hi All,
Is there a way to avoid the multiplication by 100 when showing a column as % in Dash Data table.
I want just to append the ‘%’ at the ends of the cell value in a particular columns

Please suggest
Regards

2

Hi @vvvddd

The number formatting in the DataTable is based on the d3-format, so if you specify the percentage format, it assumes the percentage value is a decimal, and then multiplies it by 100 and shows the % symbol. If all you want is to add the % symbol to the number, then you can use the method that formats currencies.

The syntax looks a little strange at first. The default symbol is a $, but you can change it to something else using the "locale" prop. To make it a little more clear, here is a table with 3 columns - dollars, euros and “percentage”. The number 100 would be formatted: $100.00 in column 1, €100,00 EUR in col 2 and 100.1% in col 3.

I hope this helps :100:

dash_table.DataTable(            
        columns=[
            {
                "name": "US Dollar",
                "id": "USD",
                "type": "numeric",
                "format": {
                    "specifier": "$,.2f",
                },
            },
            {
                "name": "Euro",
                "id": "EUR",
                "type": "numeric",
                "format": {  
                    "specifier": "$,.2f",
                    "locale": {
                        "symbol": ["€", " EUR"],
                        "group": ".",
                        "decimal": ",",
                    },
                },
            },
            {
                "name": "Percentage",
                "id": "PCT",
                "type": "numeric",
                "format": {
                    "specifier": "$,.1f",
                    "locale": {"symbol": ["", "%"]},
                },
            },                    
        ],
2 Likes
3

Great example! Thanks for sharing this one :100:

1 Like
4

Thanks a lot for update and quick reply, I found lots of helpful things here, Really appreciate for help.

2 Likes