Filter Model & Dash Callbacks

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,.

Example 1: Setting the Filter Model in a 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

Example 2: Setting the Filter Model when the App Starts

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

Example 3: Filtered and Sorted Data

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