How to format dash datatable in a transposed dataframe?

Dash Python
2

Hi @kabure

With DataTable, it’s not possible to format data by row. You would have to make the numeric data strings and format the data before it’s sent to the table. (Which isn’t great if it’s editable, like in your example.

However, this is possible to do with Dash AG Grid. Here’s an example:

from dash import html, Dash
import dash_ag_grid as dag
import pandas as pd

list_of_vals = [
    {
        "Val ID": "9729",
        "Year Col": "2017",
        "Hours Col": 1253.0,
        "Value Col": 31950000.0,
    },
    {
        "Val ID": "9733",
        "Year Col": "2016",
        "Hours Col": 2541.0,
        "Value Col": 29995000.0,
    },
    {"Val ID": "9837", "Year Col": "2019", "Hours Col": 566.0, "Value Col": 34900000.0},
    {
        "Val ID": "9507",
        "Year Col": "2013",
        "Hours Col": 2732.0,
        "Value Col": 26000000.0,
    },
    {
        "Val ID": "9805",
        "Year Col": "2018",
        "Hours Col": 1543.0,
        "Value Col": 31500000.0,
    },
]

df = pd.DataFrame(list_of_vals)
df = df.set_index("Val ID").T
df = df.reset_index().rename(columns={"index": "Val ID"})
data_list = [item for item in df.to_dict(orient="records")]
columns_list = list(df.columns)

app = Dash()

app.layout = html.Div(
    [
        dag.AgGrid(
            rowData=data_list,
            columnDefs=[{"field": "Val ID", "editable": False}]
            + [
                {
                    "field": c,
                    "valueFormatter": {"function": "FormatNumbersByRow(params)"},
                    "type": "numericColumn",
                    "cellDataType": "number",
                }
                for c in columns_list
                if c != "Val ID"
            ],
            defaultColDef={"editable": True, "flex": 1},
            dashGridOptions={
                "undoRedoCellEditing": True,
                "undoRedoCellEditingLimit": 20,
            },
        )
    ]
)


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

Put this is the dashAgGridFunctions.js file in /assets

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.Intl = Intl;

dagfuncs.FormatNumbersByRow = function(params) {   
    if (params.data["Val ID"] == "Hours Col") {
        return Intl.NumberFormat("en-US").format(params.value);
    }
    if (params.data["Val ID"] == "Value Col") {
        return Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD",
            minimumFractionDigits: 0,
            maximumFractionDigits: 0,
          }).format(params.value);
    }
}

If you are new to AG Grid, you might find this article helpful: