Custom Column Filters

Filter components allow you to add your own filter types to AG Grid. Use them when the provided filters do not meet your requirements.

The example below shows a custom filter on the Year column

View the JavaScript functions used for this example.

These JavaScript functions must be added to a .js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

// for v35 filter logic seperate
dagfuncs.doesFilterPass = (params) => {
   return params.data.year >= 2010;
}


// component is defined in dashAgGridComponentFunctions

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.YearFilter = (props) => {
    const [year, setYear] = React.useState('All');

   React.useEffect(() => {
       props.onModelChange(year === "All" ? null : year)
   }, [year]);

    setProps = ({value}) => {
        if (value) {
            setYear(value)
        }
    }

    return React.createElement(
        window.dash_core_components.RadioItems,
        {
            options: [
                {'label': 'All', 'value': 'All'},
                {'label': 'Since 2010', 'value': '2010'},
            ],
            value: year,
            setProps
        }
    )
};

```python

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash()


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

rowData = df.to_dict('records')

columnDefs = [
    { 'field': 'country', 'minWidth': 150 },
    { 'field': 'year', 'filter': {'component':  'YearFilter', 'doesFilterPass': {'function': 'doesFilterPass'}}},
    { 'field': 'sport' },
    { 'field': 'gold' },
    { 'field': 'silver' },
    { 'field': 'bronze' },
    { 'field': 'total' },
]

defaultColDef = {
    'flex': 1,
    'minWidth': 100
}


app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid-custom-column-filter",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef=defaultColDef,
            # Needs to be set in dash-ag-grid>=34.0 with filter logic seperate from component
            dashGridOptions={"enableFilterHandlers": True}
        ),
    ]
)


if __name__ == "__main__":
    app.run(debug=True)
```

Implementing a Filter Component

To configure custom filters, first enable the grid option enableFilterHandlers.

dag.AgGrid(    
    dashGridOptions={"enableFilterHandlers": True},
    # other props
)

If you do not enable the grid option enableFilterHandlers, it is still possible to use custom filters, however this
will involve embedding your filter logic into the custom component, and is not recommended as of Dash Ag Grid v34.
See GitHub Issue 414 for examples of the previous approach.

Implementing a custom filter requires two parts:

The custom filter component which will be displayed to the user.
The logic to run the filter.

Custom filter components are controlled components, which receive a filter model as part of the props, and pass model updates back to the grid via the onModelChange callback.

For more information refer to the AG Grid Component Filter docs.