The filter model represents the state of filters for all columns and has the following structure:
# Sample filterModel
{
'athlete': {
'filterType': 'text',
'type': 'startsWith',
'filter': 'mich'
},
'age': {
'filterType': 'number',
'type': 'lessThan',
'filter': 30
}
}
This is useful if you want to set the filter initially, or save the filter state and apply it at a later stage.
It is also useful when you want to pass the filter state to the server for filtering in a Dash callback,.
This example demonstrates
- Setting the filterModel
in a callback with the “Update Filter” button
- Using persistence to maintain user selections when the page is refreshed
import dash
import dash_ag_grid as dag
from dash import Dash, Input, Output, dcc, html, callback
app = Dash(__name__)
columnDefs = [
{"field": "make"},
{"field": "model"},
{"field": "price"},
]
rowData = [
{"make": "Toyota", "model": "Celica", "price": 35000},
{"make": "Ford", "model": "Mondeo", "price": 32000},
{"make": "Porsche", "model": "Boxster", "price": 72000},
]
app.layout = html.Div(
[
dcc.Markdown(
"Use the 'Update Filter' button to set the `filterModel` "
),
html.Button("Update Filter", id="filter-model-btn-2", n_clicks=0),
dag.AgGrid(
id="filter-model-grid-2",
columnSize="sizeToFit",
rowData=rowData,
columnDefs=columnDefs,
defaultColDef={"filter": True, "sortable": True, "floatingFilter": True},
persistence=True,
persisted_props=["filterModel"]
),
]
)
@callback(
Output("filter-model-grid-2", "filterModel"),
Input("filter-model-btn-2", "n_clicks"),
)
def get_cur_filter(n):
if n >0:
return {'model': {'filterType': 'text', 'type': 'contains', 'filter': 'cel'}}
return dash.no_update
if __name__ == "__main__":
app.run(debug=True)
Use the ‘Update Filter’ button to set the filterModel
This example demonstrates
- Settings the filter when the app starts
- Accessing the filterModel
in a callback
import dash_ag_grid as dag
from dash import Dash, Input, Output, html, callback, dcc
app = Dash(__name__)
columnDefs = [
{"field": "make"},
{"field": "model"},
{"field": "price"},
]
rowData = [
{"make": "Toyota", "model": "Celica", "price": 35000},
{"make": "Ford", "model": "Mondeo", "price": 32000},
{"make": "Porsche", "model": "Boxster", "price": 72000},
]
app.layout = html.Div(
[
dcc.Markdown("This grid has a filter set initially"),
dag.AgGrid(
id="filter-model-grid2",
columnSize="sizeToFit",
rowData=rowData,
columnDefs=columnDefs,
defaultColDef={"filter": True, "sortable": True, "floatingFilter": True},
filterModel={'model': {'filterType': 'text', 'type': 'contains', 'filter': 'cel'}}
),
html.Div(id="filter-model-output2"),
]
)
@callback(
Output("filter-model-output2", "children"),
Input("filter-model-grid2", "filterModel"),
)
def get_cur_filter(selection_changed):
return str(selection_changed)
if __name__ == "__main__":
app.run(debug=True)
This grid has a filter set initially
This example demonstrates using the virtualRowData
in a callback to access filtered and sorted data in a callback..
Note - Use rowData
to get the original data.
import dash_ag_grid as dag
from dash import Dash, Input, Output, html, callback, dcc
app = Dash(__name__)
columnDefs = [
{"field": "make"},
{"field": "model"},
{"field": "price"},
]
rowData = [
{"make": "Toyota", "model": "Celica", "price": 35000},
{"make": "Ford", "model": "Mondeo", "price": 32000},
{"make": "Porsche", "model": "Boxster", "price": 72000},
]
app.layout = html.Div(
[
dcc.Markdown("Demo of accessing grid data after sort and filter"),
dag.AgGrid(
id="virtualRowData-grid",
columnSize="sizeToFit",
rowData=rowData,
columnDefs=columnDefs,
defaultColDef={"filter": True, "sortable": True, "floatingFilter": True},
),
html.Div(id="virtualRowData-output"),
]
)
@callback(
Output("virtualRowData-output", "children"),
Input("virtualRowData-grid", "virtualRowData"),
)
def get_data(virtual_data):
return str(virtual_data)
if __name__ == "__main__":
app.run(debug=True)
Demo of accessing grid data after sort and filter