Set Filter Data Updates

Set Filter is an AG Grid Enterprise feature, so you’ll need a license key to use it. See Using AG Grid Enterprise for an example of how to use your license key with Dash AG Grid components.

This section describes how changing data through

from dash import Dash, html, callback, Input, Output
import dash_ag_grid as dag


rowData = [
    {"col1": "A"},
    {"col1": "A"},
    {"col1": "B"},
    {"col1": "B"},
    {"col1": "C"},
    {"col1": "C"},
]


app = Dash(__name__)

columnDefs = [
    {
        "headerName": "Set Filter Column",
        "field": "col1",
        "filter": "agSetColumnFilter",
        "flex": 1,
        "editable": True,
    },
]


grid = dag.AgGrid(
    id="set-filter-data-updates",
    enableEnterpriseModules=True,
    rowData=rowData,
    columnDefs=columnDefs,
    dashGridOptions={"sideBar": "filters"},
)

reset_button = html.Button("Reset", n_clicks=0, id="set-filter-data-updates-reset")

app.layout = html.Div(
    [html.H4("Set Filter Example: Row / Cell Updates"), reset_button, grid]
)


@callback(
    Output("set-filter-data-updates", "rowData"),
    Input("set-filter-data-updates-reset", "n_clicks"),
)
def reset(n):
    return rowData


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

Set Filter Example: Row / Cell Updates

Transaction and Partial Property Updates

Transaction Updates refers to any of the following:

from dash import Dash, html, callback, Input, Output, State, Patch, no_update
import dash_ag_grid as dag


rowData = [
    {"col1": "A"},
    {"col1": "A"},
    {"col1": "B"},
    {"col1": "B"},
    {"col1": "C"},
    {"col1": "C"},
]


app = Dash(__name__)

columnDefs = [
    {
        "headerName": "Set Filter Column",
        "field": "col1",
        "filter": "agSetColumnFilter",
        "flex": 1,
        "editable": True,
    },
]


grid = dag.AgGrid(
    id="set-filter-trans-update-grid",
    enableEnterpriseModules=True,
    rowData=rowData,
    columnDefs=columnDefs,
    dashGridOptions={"sideBar": "filters"},
)

app.layout = html.Div(
    [
        html.H4("Set Filter Example: Row Transaction and Patch Updates"),
        html.Button("Update Row 1", n_clicks=0, id="set-filter-patch-update"),
        html.Button("Add 'D' Row", n_clicks=0, id="set-filter-trans-update"),
        html.Button("Reset", n_clicks=0, id="set-filter-trans-reset"),
        grid,
    ]
)


@callback(
    Output("set-filter-trans-update-grid", "rowData", allow_duplicate=True),
    Input("set-filter-trans-reset", "n_clicks"),
    prevent_initial_call=True,
)
def reset(n):
    return rowData


@callback(
    Output("set-filter-trans-update-grid", "rowTransaction"),
    Input("set-filter-trans-update", "n_clicks"),
)
def reset(n):
    if n > 0:
        return {"add": [{"col1": "D"}]}
    return no_update


@callback(
    Output("set-filter-trans-update-grid", "rowData", allow_duplicate=True),
    Input("set-filter-patch-update", "n_clicks"),
    State("set-filter-trans-update-grid", "rowData"),
    prevent_initial_call=True,
)
def reset(_, r):
    if r:
        patched_grid = Patch()
        patched_grid[0]["col1"] = r[0]["col1"] + "X"
        return patched_grid
    return no_update


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

Set Filter Example: Row Transaction and Patch Updates

Setting New Data

When rowData is updated, existing filter selections are kept when new rows are added. It is also possible to clear filter selections by updating the filterModel prop in a Dash callback.

The following example demonstrates how this affects filter selections. Try the following:

from dash import Dash, html, Input, Output, callback
import dash_ag_grid as dag


rowData = [
    {"col1": "A"},
    {"col1": "A"},
    {"col1": "B"},
    {"col1": "B"},
    {"col1": "C"},
    {"col1": "C"},
]

newData = [
    {"col1": "A"},
    {"col1": "A"},
    {"col1": "B"},
    {"col1": "C"},
    {"col1": "D"},
    {"col1": "E"},
]


app = Dash(__name__)

columnDefs = [
    {
        "headerName": "Set Filter Column",
        "field": "col1",
        "filter": "agSetColumnFilter",
        "flex": 1,
        "editable": True,
    },
]


grid = dag.AgGrid(
    id="set-filter-new-data-grid",
    enableEnterpriseModules=True,
    rowData=rowData,
    columnDefs=columnDefs,
    dashGridOptions={"sideBar": "filters"},
)


app.layout = html.Div(
    [
        html.H4("Set Filter Example: Setting New Data"),
        html.Button("Set New Data", n_clicks=0, id="set-filter-new-data-set"),
        html.Button("Reset", n_clicks=0, id="set-filter-new-data-reset"),
        grid,
    ]
)


@callback(
    Output("set-filter-new-data-grid", "rowData", allow_duplicate=True),
    Output("set-filter-new-data-grid", "filterModel"),
    Input("set-filter-new-data-reset", "n_clicks"),
    prevent_initial_call=True,
)
def reset(n):
    return rowData, {}


@callback(
    Output("set-filter-new-data-grid", "rowData"),
    Input("set-filter-new-data-set", "n_clicks"),
    prevent_initial_call=True,
)
def reset(n):
    return newData


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

Set Filter Example: Setting New Data