Custom Function Value Formatters

For more information on valueFormatter see:

Example 1: Using 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:

columnDefs = [
  {"headerName": "Euro", "field": "EUR", "valueFormatter": {"function": "EUR(params.value)"}},
]

View the JavaScript functions used for this example.

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

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 2: Custom Function for blank when NaN

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.

View the JavaScript functions used for this example.

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

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

dagfuncs.Intl = Intl;

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);
};