Multi-Column Filter: Nested comparator functions not properly recognized in filterParams #412
Description
Issue Description
When using agMultiColumnFilter with nested filters that contain comparator functions, the comparator is not properly recognized, resulting in a JavaScript error: "Uncaught TypeError: o is not a function".
Current Behavior
When defining a multi-column filter with nested comparator functions like this:
import dash_ag_grid as dag from dash import Dash, html import pandas as pd app = Dash() df = pd.read_csv( "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv" ) columnDefs = [ {"field": "athlete", "filter": "agMultiColumnFilter", "filterParams": { "filters": [ {"filter": "agTextColumnFilter"}, {"filter": "agSetColumnFilter"} # Example with Set Filter ] }}, {"field": "country"}, { "field": "date", "filter": "agMultiColumnFilter", "filterParams": { "filters": [ { "filter": "agSetColumnFilter", 'filterParams': {'excelMode': 'windows', 'buttons': ['apply', 'reset'], } }, { "filter": "agDateColumnFilter", 'filterParams': { 'excelMode': 'windows', 'buttons': ['apply', 'reset'], 'comparator': {'function': 'dateFilterComparator'}, } }, ], }, }, ] app.layout = html.Div( [ dag.AgGrid( id="date-filter-example", enableEnterpriseModules=True, columnDefs=columnDefs, rowData=df.to_dict("records"), defaultColDef={"flex": 1, "minWidth": 150, "floatingFilter": True}, dashGridOptions={"animateRows": False} ), ], ) if __name__ == "__main__": app.run(debug=True)dagfuncs.dateFilterComparator = (filterLocalDateAtMidnight, cellValue) => { console.log("Comparing date: ", cellValue); const dateAsString = cellValue; if (dateAsString == null) { // Return -1 to show nulls "before" any date return -1; } // The data from this CSV is in dd/mm/yyyy format const dateParts = dateAsString.split("/"); if (dateParts.length !== 3) { // Handle invalid format return 0; } const day = Number(dateParts[0]); const month = Number(dateParts[1]) - 1; // JS months are 0-indexed const year = Number(dateParts[2]); const cellDate = new Date(year, month, day); // Check for invalid date (e.g., from "NaN") if (isNaN(cellDate.getTime())) { return 0; } // Now that both parameters are Date objects, we can compare if (cellDate < filterLocalDateAtMidnight) { return -1; } else if (cellDate > filterLocalDateAtMidnight) { return 1; } return 0; };The comparator functions in the nested filterParams are not properly processed, leading to runtime errors.
Steps to Reproduce
- Create a grid with an agMultiColumnFilter on a date column
- Configure both a SetFilter and DateFilter with comparator functions
- Attempt to filter the data
- Observe the JavaScript error in the console
Expected Behavior
The nested comparator functions should be properly recognized and converted, allowing proper date comparison in both the SetFilter and DateFilter components within the MultiFilter.