Dash row wise number formatting

Dash Python
1

Is it possible to apply row by row number formatting in dash data table? Right now, style_data_conditional does not work in below code .

import dash
import dash_table
import pandas as pd



d = [[1, 2, 3], [5, 6, 7], [9, 10, 11], [12, 13, 14]]
df = pd.DataFrame(d, columns=["A", "B", "C"])

app = dash.Dash()

app.layout = dash_table.DataTable(
    data=df.to_dict("records"),
    columns=[{"name": col, "id": col} for col in df.columns],
    style_data_conditional=[
        # Apply 4 decimal places to the first row
        {
            "if": {"row_index": 0},
            "textAlign": "right",
            "numberFormat": ".4f",
        },
        # Apply 2 decimal places to the second row
        {
            "if": {"row_index": 1},
            "textAlign": "right",
            "numberFormat": ".2f",
        },
        # Apply a percentage format to the third row
        {
            "if": {"row_index": 2},
            "textAlign": "right",
            "numberFormat": ".2%",
        },
        # Apply a dollar format to the fourth row
        {
            "if": {"row_index": 3},
            "textAlign": "right",
            "numberFormat": "$,.2f",
        },
    ],
)


app.run_server()
1 Like
2

I second this question or request. It would be very nice to a row-wise or even cell-wise numeric formatting in DataTable.

As for your question,

I believe your code does not work because there is no such thing as "numberFormat". In my understanding, style_data_conditional simply applies a CSS property to the generated HTML when the if-condition is satisfied. For example, textAlign becomes the text-align CSS property (god only knows why Dash team went for camelCase instead of hyphenation, perhaps they did not know the difference between hyphens and dashes and did not want to dash Dash syntax with more dashes).

So your code does not work because there is no numeric-format property in the list of all CSS properties.

3

@avm23, you are correct that it’s not possible to use row-wise conditional formatting to format numbers in the DataTable. However it’s possible with Dash AG Grid.

See the Dash docs:

For an example of formatting numbers by row, see the last example on this page:

2 Likes
4

Thanks, @AnnMarieW ! Your example is very pretty and to-the-point, and I will use it if I have no other choice. (Because I’d rather avoid writing Javascript functions when a specifier like 10,.4~f should do the job)

Unfortunately, it seems that AG Grid also uses an asymmetric model, in which columns and rows are entities of different kind, and only columns can be assigned a format or a formatter. This asymmetry makes transposing a table for display purposes a very difficult operation (if at all possible!).

5

is there any chance to include row-wise number formatting in DataTable in near future?

6

Hi @mend4x

I don’t believe this is on the radar, so it’s not likely to happen in the near future. I remember seeing this raised a few years ago but I can’t find the issue. You could try opening a feature request in the GitHub issues – or take Dash AG Grid for a spin :slight_smile:

7

Hi @AnnMarieW! Thank you for your quick response.
or can DataTable be rendered from left to right with headers on left side? not as usual from top to bottom, where headers are at the top. asking just in case)

8

Unfortunately that’s not possible currently with DataTable.

9

Understood, thx!