Dash AG Grid- agMultiColumnFilter with agTextColumnFilter and agDateColumnFilter

Dash Python
1

I made this sample grid with a Date column that has both a Text filter and a Date filter. It requires a bit of JS in the form of a comparator to get both filters to work correctly. I thought this would be a helpful example of a MultiColumnFilter.

requirements.txt

dash_ag_grid==33.3.3
dash==3.3.0

app.py

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

#sample data
data = pd.DataFrame({
    "id": [1, 2, 3, 4],
    "date": ["2025-01-05", "2024-12-20", "2025-02-14", "2025-03-01"]
})

#special comparator 
column_defs = [
    {
        "headerName": "ID",
        "field": "id",
        "filter": "agNumberColumnFilter",
    },
    {
        "field": "date",
        "filter": "agMultiColumnFilter",
        "filterParams": {
            "filters": [
                {
                    "filter": "agTextColumnFilter",
                    'filterParams': {'excelMode': 'windows', 'buttons': ['apply', 'reset'], 
                    }
                },
                {
                    "filter": "agDateColumnFilter",
                    'filterParams': {
                        'excelMode': 'windows', 
                        'buttons': ['apply', 'reset'],
                        'comparator': {'function': 'dateFilterComparator'},
      
                    }
                },
            ],

        },
    },
]


default_col_def = {
    "filter": True,
    "sortable": True,
    "resizable": True,
}


app = Dash(__name__)

app.layout = html.Div(
    [
        html.H3("AG Grid with Date Filter + Formatter"),
        dag.AgGrid(
            id="date-grid",
            className="ag-theme-alpine",
            enableEnterpriseModules=True,
            columnDefs=column_defs,
            rowData=data.to_dict("records"),
            defaultColDef=default_col_def,
            dashGridOptions={"animateRows": True},
            style={"height": 400, "width": "80%"},
        ),
    ],
    style={"margin": "40px"},
)

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

assets/dashAgGridFunctions.js

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

dagfuncs.dateFilterComparator = function (filterLocalDateAtMidnight, cellValue) {
  if (cellValue == null) return -1;
  
  // Split the ISO string (YYYY-MM-DD)
  const dateParts = cellValue.split('T')[0].split('-');
  const cellDate = new Date(
    Number(dateParts[0]),
    Number(dateParts[1]) - 1,
    Number(dateParts[2])
  );

  if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
    return 0;
  }
  if (cellDate < filterLocalDateAtMidnight) {
    return -1;
  }
  if (cellDate > filterLocalDateAtMidnight) {
    return 1;
  }
};

Let me know if you have any questions! I hope this helps :slight_smile:

1 Like