Merge pull request #436 from AnnMarieW/v35

enable filter handlers

Author: AnnMarieW

CHANGELOG.md

@@ -6,6 +6,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
 
 ## [unreleased]
 
+### Added 
+- [#436](https://github.com/plotly/dash-ag-grid/pull/436) Enabled Filter Handlers to simplify custom filter components by splitting the filter logic out from the UI component.
+
 ## [35.0.0rc0] - 2026-01-21
 ### Changed
 - bumping to v`35.0.0` for the grid

src/lib/fragments/AgGrid.react.js

@@ -564,7 +564,9 @@ export function DashAgGrid(props) {
                     if (has('function', value)) {
                         return convertMaybeFunctionNoParams(value);
                     }
-                    return convertCol(value);
+                    if (typeof value === 'object') {
+                        return convertCol(value);
+                    }
                 }
                 // not one of those categories - pass it straight through
                 return value;

src/lib/utils/propCategories.js

@@ -185,14 +185,17 @@ export const GRID_NESTED_FUNCTIONS = {
  **/
 export const COLUMN_MAYBE_FUNCTIONS_NO_PARAMS = {
     cellEditor: 1,
-    filter: 1,
 
     // Columns: Sort
     comparator: 1,
     pivotComparator: 1,
 
     // filter params custom option
     predicate: 1,
+
+    // filter
+    doesFilterPass: 1,
+    handler: 1,
 };
 
 /**
@@ -299,6 +302,7 @@ export const COLUMN_NESTED_OR_OBJ_OF_FUNCTIONS = {
  **/
 export const COLUMN_NESTED_OR_OBJ_OF_FUNCTIONS_NO_PARAMS = {
     filterParams: 1,
+    filter: 1,
 };
 
 /**

tests/assets/dashAgGridComponentFunctions.js

@@ -137,4 +137,31 @@ dagcomponentfuncs.myCustomButton2 = function (props) {
         className: props.value.className,
 
     }, 'test cellRendererData'))
-}
+}
+
+
+dagcomponentfuncs.YearFilter34 = (props) => {
+    const [year, setYear] = useState('All');
+
+   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
+        }
+    )
+};

tests/assets/dashAgGridFunctions.js

@@ -221,6 +221,12 @@ dagfuncs.YearFilter = forwardRef((props, ref) => {
     )
 });
 
+
+// for v34 filter logic seperate from component
+dagfuncs.doesFilterPass = (params) => {
+   return params.data.year >= 2010;
+}
+
 dagfuncs.setBody = () => {
     return document.querySelector('body')
 }

tests/test_custom_filter.py

@@ -125,6 +125,67 @@ def test_fi003_custom_filter(dash_duo):
     grid.wait_for_cell_text(0, 0, "23")
 
 
+def test_fi003_custom_filter_v34(dash_duo):
+    app = Dash(__name__)
+
+    df = pd.read_json('https://www.ag-grid.com/example-assets/olympic-winners.json', convert_dates=False)
+
+    rowData = df.to_dict('records')
+
+    columnDefs = [
+        {'field': 'age', 'filter': 'agNumberColumnFilter'},
+        {'field': 'country', 'minWidth': 150},
+        {'field': 'year', 'filter': {'component': 'YearFilter34', 'doesFilterPass': {'function': 'doesFilterPass'}}},
+        {
+            'field': 'date',
+            'minWidth': 130,
+            'filter': 'agDateColumnFilter',
+        },
+        {'field': 'sport'},
+        {'field': 'gold', 'filter': 'agNumberColumnFilter'},
+        {'field': 'silver', 'filter': 'agNumberColumnFilter'},
+        {'field': 'bronze', 'filter': 'agNumberColumnFilter'},
+        {'field': 'total', 'filter': 'agNumberColumnFilter'},
+    ]
+
+    defaultColDef = {
+        'editable': True,
+        'sortable': True,
+        'flex': 1,
+        'minWidth': 100,
+        'filter': True,
+        'resizable': True,
+    }
+
+    app.layout = html.Div(
+        [
+            dag.AgGrid(
+                id="grid",
+                columnDefs=columnDefs,
+                rowData=rowData,
+                defaultColDef=defaultColDef,
+                dashGridOptions={"enableFilterHandlers": True}
+            ),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+
+    grid.wait_for_cell_text(0, 0, "23")
+
+    dash_duo.find_element('.ag-header-cell[aria-colindex="3"] span[data-ref="eFilterButton"]').click()
+
+    dash_duo.find_element('.ag-filter label:nth-child(2)').click()
+
+    grid.wait_for_cell_text(0, 0, "27")
+
+    dash_duo.find_element('.ag-filter label:nth-child(1)').click()
+
+    grid.wait_for_cell_text(0, 0, "23")
+
+
 # test filterParams.textFormatter, filterParams.textMatcher and filterParams.filterOptions.predicate functions
 def test_fi004_custom_filter(dash_duo):
     app = Dash(__name__)