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.

If you are using AG Grid Enterprise, note that the Set Filter is the default rather than the Text Filter.
For more information, please see the Set Filter section.

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

Setting the Filter Model when the App Starts

This example demonstrates
- Settings the filter when the app starts
- Accessing the filterModel in a callback

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.

Filter Model Multiple Conditions

Note that as of AG Grid versions 29.2, multiple Filter Conditions are supported.

Each filter’s default filter options can be found on their respective pages:
- Text Filter Options
- Number Filter Options
- Date Filter Options

Here’s an example multiple conditions for the Text Filter on the “sport” column:

filterModel = {
    "sport": {
        "filterType": "text",
        "operator": "OR",
        "conditions": [
            {
                "filter": "Swim",
                "filterType": "text",
                "type": "contains",
            },
            {
                "filter": "Ski",
                "filterType": "text",
                "type": "contains",
            },
            {
                "filter": "Rowing",
                "filterType": "text",
                "type": "contains",
            }
         ]
    }
}

This example shows updating multiple filter options in a callback.

Note that the "suppressHeaderMenuButton": True is set on the Year column. This removes the filter icon from the Year column header so that the Year filter can be set only from the dropdown.