# How to format dash datatable in a transposed dataframe?

**URL:** <https://community.plotly.com/t/how-to-format-dash-datatable-in-a-transposed-dataframe/83996>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [April 23, 2024, 7:28pm UTC](https://community.plotly.com/t/how-to-format-dash-datatable-in-a-transposed-dataframe/83996 "2024-04-23T19:28:08Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [April 23, 2024, 9:16pm UTC](https://community.plotly.com/t/how-to-format-dash-datatable-in-a-transposed-dataframe/83996/2 "2024-04-23T21:16:16Z")

</div>

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:

```auto
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

```auto
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:

> **[Dash AG Grid Examples: Getting started with V31](https://dashaggridexamples.pythonanywhere.com/get-started-v31)**
>
> Tutorials, tips & tricks and additional examples to supplement the Dash AG Grid documentation.

---

_[View the full topic](https://community.plotly.com/t/how-to-format-dash-datatable-in-a-transposed-dataframe/83996)._