dash-ag-grid icon indicating copy to clipboard operation
dash-ag-grid copied to clipboard

Multi-Column Filter: Nested comparator functions not properly recognized in filterParams

Open andre996 opened this issue 3 months ago • 0 comments

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

  1. Create a grid with an agMultiColumnFilter on a date column
  2. Configure both a SetFilter and DateFilter with comparator functions
  3. Attempt to filter the data
  4. 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.

andre996 avatar Oct 24 '25 18:10 andre996