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)
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)
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)