For more information on valueFormatter
see:
Intl.NumberFormat
Rather than using d3.format
, this example formats currency in different locales using Intl.NumberFormat
The custom functions are registered by adding them to the dashAgGridFunctions
namespace. This is added to the dashAgGridFunctions.js
file in the assets
folder.
Here is an example:
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.EUR = function(number) {
return Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number);
}
Then use the function in the columnDefs
like this:
columnDefs = [
{"headerName": "Euro", "field": "EUR", "valueFormatter": {"function": "EUR(params.value)"}},
]
"""
Example of currency formatting using Intl.NumberFormat
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat</a>
"""
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import pandas as pd
app = Dash(__name__)
df = pd.DataFrame(
{
"Exchange": ["Canadian Dollar", "Euro", "Japanese Yen", "US Dollar"],
"CAD": [1, 1.3128, .000945, 1.3105],
"EUR": [.7618, 1, .0071980, .9983],
"JPY": [105.84, 138.94, 1, 138.76],
"USD": [.7630, 1.0016, .00720950, 1],
}
)
df = df.set_index("Exchange")
columnDefs = [
{"headerName": "Currency Exchange Table", "field": "Exchange"},
{"headerName": "Canadian Dollar", "field": "CAD", "valueFormatter": {"function": "CAD(params.value)"}},
{"headerName": "Euro", "field": "EUR", "valueFormatter": {"function": "EUR(params.value)"}},
{"headerName": "Japanese Yen", "field": "JPY", "valueFormatter": {"function": "JPY(params.value)"}},
{"headerName": "US Dollar", "field": "USD", "valueFormatter": {"function": "USD(params.value)"}}
]
app.layout = html.Div(
[
dcc.Markdown("Example of custom functions using `Intl.NumberFormat` to format currencies"),
html.Label("Amount to Exchange"),
dcc.Input(id="currency-exchange-input", type="number", value=1000),
dag.AgGrid(
id="currency-exchange-grid",
columnDefs=columnDefs,
columnSize="sizeToFit",
defaultColDef={"type": "rightAligned"}
)
], style={"margin": 20}
)
@callback(
Output("currency-exchange-grid", "rowData"), Input("currency-exchange-input", "value")
)
def update_table(amount):
dff = df.multiply(amount, fill_value=0) if amount else df.copy()
return dff.reset_index().to_dict("records")
if __name__ == "__main__":
app.run(debug=True)
"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder
This will register the functions used to format the currencies.
---------------
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.Intl = Intl
dagfuncs.EUR = function(number) {
return Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number);
}
dagfuncs.JPY = function(number) {
return Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)
}
dagfuncs.USD = function(number) {
return Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number);
}
dagfuncs.CAD = function(number) {
return Intl.NumberFormat('en-CA', { style: 'currency', currency: 'CAD', currencyDisplay: 'code' }).format(number);
}
"""
Example of custom functions using Intl.NumberFormat
to format currencies
This example adds more features to the function that formats currency and percentages. It will return blanks
instead of NaN when text or other invalid numbers are entered in the January or Budget columns.
"""
String formatting with basic JavaScript function
"""
import dash_ag_grid as dag
from dash import Dash, html, dcc
app = Dash(__name__)
rowData = [
dict(account='Salaries', January=103567.34, Budget=110000),
dict(account='Rent', January=8745.00, Budget=7000),
dict(account='Utilities', January=-3745.34, Budget=2000),
dict(account='Bad Debt', January=2546.78, Budget=3000),
dict(account='Depreciation', January=4000.00, Budget=4000),
]
columnDefs = [
{
"field": "account",
},
{
"field": "January",
"valueFormatter": {"function": "MoneyFilna(params.value)"},
"editable": True
},
{
"field": "Budget",
"valueFormatter": {"function": "MoneyFilna(params.value)"},
"editable":True
},
{
"headerName": "Variance",
"valueGetter": {"function": "(Number(params.data.January) - Number(params.data.Budget)) / Number(params.data.Budget)"},
"valueFormatter": {"function": "PercentageFilna(params.value)"},
},
]
defaultColDef = {
"resizable": True,
"editable": False,
}
app.layout = html.Div(
[
dcc.Markdown(
"""
This example demonstrates a custom function that replaces NaN with blanks.
Try entering invalid number in the January or Budget columns.
-----------
""",
),
html.H4("Expense Summary for January"),
dag.AgGrid(
id="custom-function-2",
columnDefs=columnDefs,
rowData=rowData,
columnSize="sizeToFit",
defaultColDef=defaultColDef,
),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=True)
"""
Put the following in the dashAgGridComponentFunctions.js file in the assets folder
This will register the functions used to format the currencies.
---------------
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
dagfuncs.Intl = Intl
dagfuncs.EUR = function(number) {
return Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number);
}
dagfuncs.JPY = function(number) {
return Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)
}
dagfuncs.USD = function(number) {
return Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number);
}
dagfuncs.CAD = function(number) {
return Intl.NumberFormat('en-CA', { style: 'currency', currency: 'CAD', currencyDisplay: 'code' }).format(number);
}
dagfuncs.PercentageFilna = function(number, filna="") {
if (isNaN(number)){
return filna
}
return Intl.NumberFormat("en-US", {style: "percent"}).format(number)
}
dagfuncs.MoneyFilna = function(number, filna="") {
if (isNaN(number)){
return filna
}
return Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number);
}
"""
This example demonstrates a custom function that replaces NaN with blanks.
Try entering invalid number in the January or Budget columns.