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:

Updating data via Cell Editing.
Updating data via Async Transactions API.
Changes to Row Data and providing

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:

Deselect value 'B' from the set filter list and click the Set New Data button. It updates the rowData prop in a Dash callback.
Note that 'B' remains deselected after new data is supplied to the grid.
Clicking Reset triggers a Dash callback which updates the rowData and filerModel props to restore the original data and also clears any selections.

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)