Value formatters allow you to format values for display. This is useful when data is one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in currency symbols and number formatting).
Note that it does not change the data, only how it appears in the grid.
valueFormatter
(string | ValueFormatterFunc) A function or expression to format a value, should return a string. Not used for CSV export or copy to clipboard, only for UI cell rendering.You can supply your own custom function for displaying values, or you can use the functions defined in d3-format
and the d3-time-format
libraries.
A cell renderer allows you to put whatever HTML you want into a cell. This sounds like value formatters and a cell renderers have cross purposes, so you may be wondering, when do you use each one and not the other?
The answer is that value formatters are for text formatting and cell renderers are for when you want to include HTML markup and potentially functionality to the cell. So for example, if you want to put punctuation into a value, use a value formatter, but if you want to put buttons or HTML links use a cell renderer. It is possible to use a combination of both, in which case the result of the value formatter will be passed to the cell renderer.
In this example note that:
To see more advanced formatting, see:
- The number and date formatting with the Value Formatters with d3.format section
- Value Formatters with Custom functions section.
import dash_ag_grid as dag
from dash import Dash, html, dcc
app = Dash(__name__)
rowData = [
dict(account='account a', balance=522.31, name='Homer', grade="25"),
dict(account='account b', balance=1607.9, name='Marge', grade=90),
dict(account='account c', balance=-228.41, name='Lisa', grade=100),
]
columnDefs = [
{
"field": "account",
"valueFormatter": {"function": "(params.value).toUpperCase();"},
},
{
"field": "balance",
"valueFormatter": {"function": "'$' + (params.value)"},
},
{
"field": "name",
"valueFormatter": {"function": "`Hello ${params.value}!`"},
},
{
"field": "grade",
"valueFormatter": {"function": "params.value >= 60 ? 'Pass' : 'Fail'"},
},
]
defaultColDef = {
"resizable": True,
"editable": True,
}
app.layout = html.Div(
[
dcc.Markdown(
"This demonstrates some basic string formatting functions"
),
dag.AgGrid(
id="value-formatter-grid-example-basic",
columnDefs=columnDefs,
rowData=rowData,
columnSize="sizeToFit",
defaultColDef=defaultColDef,
dashGridOptions={"singleClickEdit": True},
),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=True)
This demonstrates some basic string formatting functions