Value Getters

A valueGetter is a way to get data to using a field attribute in a column definition
Normally columns are configured with field attributes, so the column knows what field to take values from in the data. Instead of providing field it is possible to provide a valueGetter instead. A Value Getter is a function that gets called allowing values to be pulled from literally anywhere, including executing any expressions you wish along the way.

You should use field most of the time. Use value getters when retrieving the data requires more logic, including executing your own expressions (similar to what a spreadsheet would do).

valueGetter - Function or expression. Gets the value from your data for display.

# example value getter, adds two fields together
columnDefs = [
    {
        "valueGetter": {"function": "params.data.firstName + params.data.lastName;"},
    },
]

All valueGetters must be pure functions. That means, given the same state of your data, it should consistently return the same result. This is important as the grid will only call your valueGetter once during a redraw, even though the value may be used multiple times. For example, the value will be used to display the cell value, however it can additionally be used to provide values to an aggregation function when grouping, or can be used as input to another valueGetter via the params.getValue() function.

Example Value Getters

The example below demonstrates valueGetter. The following can be noted from the demo:

Columns A and B are simple columns using field
Value Getters are used in all subsequent columns as follows:
Column ‘#’ prints the row number, taken from the Row Node.
Column ‘A+B’ adds A and B.
Column ‘A * 1000’ multiplies A by 1000.
Column ‘B * 137’ multiplies B by 137.
Column ‘Random’ doesn’t take any value from the data, rather it returns a random value.
Column ‘Chain’ takes the value ‘A+B’ and works on it further, thus chaining value getters.
Column ‘Const’ returns back the same value for each column.

import dash_ag_grid as dag
from dash import Dash, html, dcc


rowData = [{"a": i % 4, "b": i % 7} for i in range(100)]

columnDefs = [
    {
        "headerName": "#",
        "maxWidth": 100,
        "valueGetter": {"function": "params.node ? params.node.rowIndex : null;"},
    },
    {"field": "a"},
    {"field": "b"},
    {
        "headerName": "A + B",
        "colId": "a&b",
        "valueGetter": {"function": "params.data.a + params.data.b;"},
    },
    {
        "headerName": "A * 1000",
        "minWidth": 95,
        "valueGetter": {"function": "params.data.a * 1000"},
    },
    {
        "headerName": "B * 137",
        "minWidth": 90,
        "valueGetter": {"function": "params.data.b * 137;"},
    },
    {
        "headerName": "Random",
        "minWidth": 90,
        "valueGetter": {"function": "Math.floor(Math.random() * 1000);"},
    },
    {
        "headerName": "Chain",
        "valueGetter": {"function": "params.getValue('a&b') * 1000;"},
    },
    {"headerName": "Const", "minWidth": 85, "valueGetter": {"function": "9999"}},
]

defaultColDef = {
    "flex": 1,
    "minWidth": 75,
}

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Markdown("Value Getters Example"),
        dag.AgGrid(
            id="value-getter-ag-grid",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef=defaultColDef
            ),
    ],
    style={"margin": 20},
)


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

Value Getters Example