Use d3 format in java script for Dash AG Grid

Dash Python
1

Hey Dash Community:

In the Dash AG Grid, is there a way to call d3.format in java script? If just use the : “valueFormatter”: {“function”: “d3.format(‘(,.0f’)(params.value)”}, cannot really handle invalid float/double/int well. It will return NaN.

Thanks!!

2

Currently you can’t access the d3 functions in the dashAgGridFunctions.js, but we are looking at adding that in the future.

See Example 2 Custom Function for blank when NaN

This example just uses regular JavaScript functions to format the numbers. But it allows you to add other things like special handling for invalid numbers.

There is a new component we’ll be adding to the docs soon. It’s a number input component - so it will ensure that valid numbers are entered in an editable grid. Also, combined with the cellRenderer, it will format the number.

ag_grid_number_input


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


data = {
    "item": ["A", "B", "C", "D"],
    "price": [154.99, 268.65, 100.47, 96.75],
}
df = pd.DataFrame(data)

columnDefs = [
    {"field": "item"},
    {
        "field": "price",
        "type": "rightAligned",
        "valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
        "editable": True,
        "cellEditor": {"function": "NumberInput"},
        "cellEditorParams" : {"type": "number", "style": {"color": "red"}}
    },
]


grid = dag.AgGrid(
    id="dbc-btn-simple-grid",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    columnSize="sizeToFit",
)


app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])

app.layout = html.Div(grid,style={"margin": 20})


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

Put this component in the dashAgGridComponentFunctions.js file in the assets folder:


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


dagfuncs.NumberInput = class {

    // gets called once before the renderer is used
  init(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.style.height = 'var(--ag-row-height)';
    this.eInput.style.fontSize = 'calc(var(--ag-font-size) + 1px)';
    this.eInput.type = params.type
    this.eInput.style.width = '100%'
  }

  // gets called once when grid ready to insert the element
  getGui() {
    return this.eInput;
  }

  // focus and select can be done after the gui is attached
  afterGuiAttached() {
    this.eInput.focus();
    this.eInput.select();
  }

  // returns the new value after editing
  getValue() {
    return this.eInput.value;
  }

  // any cleanup we need to be done here
  destroy() {
    // but this example is simple, no cleanup, we could
    // even leave this method out as it's optional
  }

  // if true, then this editor will appear in a popup
  isPopup() {
    // and we could leave this method out also, false is the default
    return false;
  }

}
2 Likes
3

Thank you @AnnMarieW. You are the best!

Actually, I don’t intend to force to input the valid numeric format. Sometimes, intend to leave the cell with “-” or empty. I did try the second example you mentioned before this post, after that, I still feel the d3 format is better. Looks like now we will wait for the d3 to be included in javascript.
Thanks is very helpful, appreciate your time and the code snipped ( which is very useful! )

1 Like