# Table Date filtering not working

**URL:** <https://community.plotly.com/t/table-date-filtering-not-working/76813>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [July 12, 2023, 7:40am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813 "2023-07-12T07:40:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 12, 2023, 7:40am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/1 "2023-07-12T07:40:59Z")

</div>

Hello,

I am defining a table from a data frame. I have a date field in that df that I need to show it and be able to filter it (equals, in range, etc.)

in my column definition, I coded the below:  
{  
“field”: “Timestamp”,  
“headerName”: “Timestamp”,  
“filter”: “agDateColumnFilter”,  
“valueFormatter”: {“function”: f"d3.timeParse(‘%d/%m/%Y)(params.data[“Timestamp”])"},  
“valueGetter”: {“function”: f"d3.timeParse(’%d/%m/%Y)(params.data[“Timestamp”])"},  
}

The dates are listed as expected. but when filtering, if I put equals, it doesn’t filter; if I put a range, the dates disappear.

Your help highly appreciated.

Thanks

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 12, 2023, 12:35pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/2 "2023-07-12T12:35:04Z")

</div>

Hi @gmouawad and welcome to the Dash community 🙂

Note that for the date filter to work, it must be a date only and if there is a time portion, it must be zero. For more information see:

> **[Date Filters | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/date-filters)**
>
> Date filters in Dash AG Grid

And the last 2 examples on this page:

> **[D3 Value Formatters | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/d3-value-formatters)**
>
> Using value formatters with D3 format in Dash AG Grid

Check the syntax of the function - it looks like you are missing a quote:

```auto
{“function”: f"d3.timeParse(‘%d/%m/%Y)(params.data[“Timestamp”])"},

```

should be:

```auto
{“function”: "d3.timeParse('%d/%m/%Y')(params.data.Timestamp)"},

```

---

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 12, 2023, 1:06pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/3 "2023-07-12T13:06:36Z")

</div>

Hello, thanks a lot @AnnMarieW.

in the below example, even with time portion including hours, date filter is working:

```auto
from dash import Dash, dcc, html
import dash_ag_grid as dag
from datetime import datetime

rowData = [
    {"date": datetime(2023, 1, 1, 1, 0, 0)},
    {"date": datetime(2023, 1, 2, 2, 0, 0)},
    {"date": datetime(2023, 1, 3, 3, 0, 0)},
    {"date": datetime(2023, 1, 4, 18, 0, 0)},
    {"date": datetime(2023, 1, 5, 22, 0, 0)},
]

# function to create a date object from a date string "YYYY-MM-DD"
date_obj = "d3.timeParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"

# if the time is in utc:
# date_obj = "d3.utcParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"

columnDefs = [
    {
        "headerName": "Datetime string",
        "field": "date",
        "filter": False,
    },
    {
        "headerName": "MM/DD/YYYY",
        "valueGetter": {"function": date_obj},
        "valueFormatter": {"function": f"d3.timeFormat('%m/%d/%Y')({date_obj})"},
    },
    {
        "headerName": "Mon DD, YYYY",
        "valueGetter": {"function": date_obj},
        "valueFormatter": {"function": f"d3.timeFormat('%b %d, %Y')({date_obj})"},
    },
    {
        "headerName": "day, Mon DD, YYYY",
        "valueGetter": {"function": date_obj},
        "valueFormatter": {"function": f"d3.timeFormat('%a %b %d, %Y')({date_obj})"},
    },
    {
        "headerName": "yyyy-mm-dd HH:MM:SS tt",
        "valueGetter": {"function": date_obj},
        "valueFormatter": {
            "function": f"d3.timeFormat('%Y-%m-%d %I:%M:%S %p')({date_obj})"
        },
    },
    {
        "headerName": "yyyy-mm-dd hh:mm:ss",
        "valueGetter": {"function": date_obj},
        "valueFormatter": {
            "function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S')({date_obj})"
        },
    },
]

defaultColDef = {
    "filter": "agDateColumnFilter",
    "filterParams": {
        "buttons": ["clear", "apply"],
    },
    "sortable": True,
}

app = Dash( __name__ )

app.layout = html.Div(
    [
        dcc.Markdown("Datetime formatting example. Note - The date filter will not work with datetime. Time must be zero (i.e. 2023-01-01T00:00:00)"),
        dag.AgGrid(id="date-times-example-2", columnDefs=columnDefs, rowData=rowData, defaultColDef=defaultColDef),
    ],
    style={"margin": 20},
)

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

```

Reference: [D3 Value Formatters | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/d3-value-formatters)

Changing my code to:

{“function”: “d3.timeParse(‘%d/%m/%Y’)(params.data.Timestamp)”},

the table shows:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/a/7a6fdb620b3a22cc43ac760669a950e3f6a62d2c.png)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 12, 2023, 1:46pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/4 "2023-07-12T13:46:29Z")

</div>

The example you posted has a time included with the date so the date filter won’t work. Try running it with this data:

```auto

rowData = [
    {"date": datetime(2023, 1, 1, 0, 0, 0)},
    {"date": datetime(2023, 1, 2, 0, 0, 0)},
    {"date": datetime(2023, 1, 3, 0, 0, 0)},
    {"date": datetime(2023, 1, 4, 0, 0, 0)},
    {"date": datetime(2023, 1, 5, 0, 0, 0)},
]

```

Note - to format the code click the `</>` icon in the editor or enclose it in three backticks

---

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 12, 2023, 1:47pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/5 "2023-07-12T13:47:32Z")

</div>

dear, with the time included, it is working. it is weird

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 12, 2023, 1:48pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/6 "2023-07-12T13:48:49Z")

</div>

dear, the time can be included as long as it’s zero

---

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 12, 2023, 3:07pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/7 "2023-07-12T15:07:15Z")

</div>

> [@gmouawad](#):
>
> ```auto
> rowData = [
> {"date": datetime(2023, 1, 1, 1, 0, 0)},
> {"date": datetime(2023, 1, 2, 2, 0, 0)},
> {"date": datetime(2023, 1, 3, 3, 0, 0)},
> {"date": datetime(2023, 1, 4, 18, 0, 0)},
> {"date": datetime(2023, 1, 5, 22, 0, 0)},
> ]
> 
> ```

understood but in the above set, time is not zero and filtering is working.

in my code data frame (not the above) I set time to zero and still it is not filtering.  
Note that I am using it under a mercury app, if that can make things clearer.

Thanks

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 12, 2023, 3:22pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/8 "2023-07-12T15:22:22Z")

</div>

That is odd, because the filter with a time doesn’t work in the docs and it doesn’t work when I run it locally. 🤷‍♀️

Here it is in the docs - if you filter for 01/02/2023 it does not work:

![date-error](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/8/0/80a12104bf32d86edb711e4b1323d7869cb7d81c.gif)

* * *

**Here’s the app I posted above where the time is set to zero. You can see that the date filter now works**

![date-error2](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/a/daeb44ade5edb9ab85609ec6ae0c8c6c036817c9.gif)

What is a mercury app?

Can you post a complete minimal example with some sample data that reproduces the filter not working?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 12, 2023, 7:09pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/9 "2023-07-12T19:09:18Z")

</div>

Hello @AnnMarieW and @gmouawad,

When using the date filter, it automatically selects midnight in the time aspect, therefore, when you use equals, it will only show responses for the exact timestamp of `01/02/2023` or `2023-01-02T00:00:00` as these points dont exist, then you’ll need to adjust this.

Example:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/8/286bcd5bcf219bd5a7799e09cbfeff2e1baab485.png)

If order to allow for only filtering of the date, I’d recommend creating your own date filter, something like this:

```auto
dagfuncs.cleanDateColumn = (cellValue) => {
    if (cellValue === 'NaT') {
        returnValue = ''
    } else {
        returnValue = cellValue.includes('T') ? cellValue.split('T')[0] : cellValue
    }
    return returnValue;
}

dagfuncs.DateComparator = (filterLocalDateAtMidnight, cellValue) => {
    // converts timestamp to just date for easier user filtering
     const dateAsString = cellValue ? dagfuncs.cleanDateColumn(cellValue): null;
     if (dateAsString == null) {
         return 0;
     }

     // convert date string to date
     var tempDate = new Date(dateAsString);

     // convert dates to disregard timezones
     var userTimezoneOffset = tempDate.getTimezoneOffset() * 60000;
     const cellDate = new Date(tempDate.getTime() + userTimezoneOffset);

     // Now that both parameters are Date objects, we can compare
     if (cellDate < filterLocalDateAtMidnight) {
         return -1;
     } else if (cellDate > filterLocalDateAtMidnight) {
         return 1;
     }
     return 0;
 }

```

To place in your code, you’d add these:

`'filter': 'agDateColumnFilter', 'filterParams':	{"comparator": {"function": "DateComparator"}}`

* * *

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/6/b62438c9ebbfd14980244579ff586a74b63a695a.png)

You also dont need to convert the value getter to the date object as we take care of that inside the `cleanDateColumn` function:

```auto
from dash import Dash, dcc, html
import dash_ag_grid as dag
from datetime import datetime

rowData = [
    {"date": datetime(2023, 1, 1, 1, 0, 0)},
    {"date": datetime(2023, 1, 2, 2, 0, 0)},
    {"date": datetime(2023, 1, 3, 3, 0, 0)},
    {"date": datetime(2023, 1, 4, 18, 0, 0)},
    {"date": datetime(2023, 1, 5, 22, 0, 0)},
]

# function to create a date object from a date string "YYYY-MM-DD"
date_obj = "d3.timeParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"

# if the time is in utc:
# date_obj = "d3.utcParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"

columnDefs = [
    {
        "headerName": "Datetime string",
        "field": "date",
        "filter": False,
    },
    {
        "headerName": "MM/DD/YYYY",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {"function": f"d3.timeFormat('%m/%d/%Y')({date_obj})"},
    },
    {
        "headerName": "Mon DD, YYYY",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {"function": f"d3.timeFormat('%b %d, %Y')({date_obj})"},
    },
    {
        "headerName": "day, Mon DD, YYYY",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {"function": f"d3.timeFormat('%a %b %d, %Y')({date_obj})"},
    },
    {
        "headerName": "yyyy-mm-dd HH:MM:SS tt",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {
            "function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S %p')({date_obj})"
        },
    },
    {
        "headerName": "yyyy-mm-dd hh:mm:ss",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {
            "function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S')({date_obj})"
        },
    },
]

defaultColDef = {
    "filter": "agDateColumnFilter",
    "filterParams": {
        "buttons": ["clear", "apply"],
        "comparator": {"function": "DateComparator"}
    },
    "sortable": True,
}

app = Dash( __name__ )

app.layout = html.Div(
    [
        dcc.Markdown("Datetime formatting example. Note - The date filter will not work with datetime. Time must be zero (i.e. 2023-01-01T00:00:00)"),
        dag.AgGrid(id="date-times-example-2", columnDefs=columnDefs, rowData=rowData, defaultColDef=defaultColDef),
    ],
    style={"margin": 20},
)

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

```

---

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 13, 2023, 8:45am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/10 "2023-07-13T08:45:15Z")

</div>

Hello,

You can check mercury on the following link: [https://runmercury.com/](https://runmercury.com/)

Regarding the code example:

```auto
#history list definition
historyList = []

#in a for loop, create an auditItem and add timestamp. property and value to it from an api response. Then add the auditItem to the historyList
auditItem = {}
auditItem["Timestamp"] = datetime.datetime(realDateTime.year, realDateTime.month, realDateTime.day, 0, 0, 0)
auditItem["Property"] = str(auditName)
auditItem["Value"] = str(value)
historyList.append(auditItem)

# dash section
historydf = pd.DataFrame(historyList)

app = Dash( __name__ )

# basic columns definition with column defaults
columnDefs = [
    {
        "field": "Timestamp",
        "headerName": "Timestamp",
        "filter": "agDateColumnFilter",
        "valueFormatter": {"function": 'params.data.Timestamp'},
        "valueGetter": {"function": 'params.data.Timestamp'},
    },
    {"field": "Property"},
    {"field": "Value"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="history_aggrid",
            columnDefs=columnDefs,
            rowData=historydf.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
        ),
    ],
    style={"margin": 0,
        "width": 750}
)

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

```

With this code, the filter is not working.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 13, 2023, 10:34am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/11 "2023-07-13T10:34:12Z")

</div>

Hello @gmouawad,

Please try my comparator and adjust your code accordingly.

Assuming your timestamp has the split of T, it should work.

---

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 13, 2023, 11:02am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/13 "2023-07-13T11:02:00Z")

</div>

Hello, in which language your comparators are written? I don’t think a python code, right?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 13, 2023, 11:04am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/14 "2023-07-13T11:04:04Z")

</div>

It is in JavaScript, that’s what the filter works in.

You need to have it in an assets folder file, check out some of the examples with custom Js functions in the grid documents.

---

<div class="post-metadata">

**Author:** ![gmouawad](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@gmouawad](https://community.plotly.com/u/gmouawad)\
**Post date:** [July 13, 2023, 1:04pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/15 "2023-07-13T13:04:54Z")

</div>

Thank you for the hint. It is working now

---

<div class="post-metadata">

**Author:** ![PlotlyDude](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@PlotlyDude](https://community.plotly.com/u/PlotlyDude)\
**Post date:** [January 14, 2024, 11:45am UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/16 "2024-01-14T11:45:58Z")

</div>

Hi,

I have tried many tricks and the example code you gave. Still the filter doesnt work, it filters nothing if I set it to equal of anything and it filters the whole table empty, if I use Less than or Greater than filters. The javascript file is in the assets folder of the root directory of the python file.

I altered the python file by setting  
rowData = [  
{“date”: datetime(2023, 1, 1, 0, 0, 0)},  
{“date”: datetime(2023, 1, 2, 0, 0, 0)},  
{“date”: datetime(2023, 1, 3, 0, 0, 0)},  
{“date”: datetime(2023, 1, 4, 0, 0, 0)},  
{“date”: datetime(2023, 1, 5, 0, 0, 0)},  
]  
And adding dagfuncs to DateComparator:

defaultColDef = {  
“filter”: “agDateColumnFilter”,  
“filterParams”: {  
“buttons”: [“clear”, “apply”],  
“comparator”: {“function”: “dagfuncs.DateComparator”}  
},  
“sortable”: True,  
}

Also added var dagfuncs = dagfuncs || {};  
To the start of the JS file.

Even with these modifications I cant get it to work properly.

I am out of ideas. Please help.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 14, 2024, 12:31pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/17 "2024-01-14T12:31:29Z")

</div>

Hello @PlotlyDude,

It is just DateComparator, not dagfuncs.DateComparator, this is in the Python code.

---

<div class="post-metadata">

**Author:** ![PlotlyDude](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@PlotlyDude](https://community.plotly.com/u/PlotlyDude)\
**Post date:** [January 14, 2024, 1:58pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/18 "2024-01-14T13:58:38Z")

</div>

Hi and thanks for reply.

Im a noob and dont understand sorry. The javascript you gave has dagfuncs before the function, which implies that it has as a namespace that needs to be referenced to? Anyways, I tried DateComparator aswel, but it doesnt work. and I thought the python code was missing the dagfuncs.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 14, 2024, 2:18pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/19 "2024-01-14T14:18:36Z")

</div>

@PlotlyDude,

This is true, but the namespace doesn’t need to be referenced in the Python. Can you please post more of how you are trying to do it?

---

<div class="post-metadata">

**Author:** ![PlotlyDude](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@PlotlyDude](https://community.plotly.com/u/PlotlyDude)\
**Post date:** [January 14, 2024, 2:33pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/20 "2024-01-14T14:33:36Z")

</div>

Im just trying to get your example to work that you provided. So here is the python code you gave:

```python
from dash import Dash, dcc, html
import dash_ag_grid as dag
from datetime import datetime

rowData = [
    {"date": datetime(2023, 1, 1, 0, 0, 0)}, ## Changed hours to 0
    {"date": datetime(2023, 1, 2, 0, 0, 0)},
    {"date": datetime(2023, 1, 3, 0, 0, 0)},
    {"date": datetime(2023, 1, 4, 0, 0, 0)},
    {"date": datetime(2023, 1, 5, 0, 0, 0)},
]

# function to create a date object from a date string "YYYY-MM-DD"
date_obj = "d3.timeParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"

# if the time is in utc:
#date_obj = "d3.utcParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"

columnDefs = [
    {
        "headerName": "Datetime string",
        "field": "date",
        "filter": False,
    },
    {
        "headerName": "MM/DD/YYYY",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {"function": f"d3.timeFormat('%m/%d/%Y')({date_obj})"},
    },
    {
        "headerName": "Mon DD, YYYY",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {"function": f"d3.timeFormat('%b %d, %Y')({date_obj})"},
    },
    {
        "headerName": "day, Mon DD, YYYY",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {"function": f"d3.timeFormat('%a %b %d, %Y')({date_obj})"},
    },
    {
        "headerName": "yyyy-mm-dd HH:MM:SS tt",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {
            "function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S %p')({date_obj})"
        },
    },
    {
        "headerName": "yyyy-mm-dd hh:mm:ss",
        "valueGetter": {"function": 'params.data.date'},
        "valueFormatter": {
            "function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S')({date_obj})"
        },
    },
]

defaultColDef = {
    "filter": "agDateColumnFilter",
    "filterParams": {
        "buttons": ["clear", "apply"],
        "comparator": {"function": "DateComparator"} ## Here I tried to add dagfuncs. to no success
    },
    "sortable": True,
}

app = Dash( __name__ )

app.layout = html.Div(
    [
        dcc.Markdown("Datetime formatting example. Note - The date filter will not work with datetime. Time must be zero (i.e. 2023-01-01T00:00:00)"),
        dag.AgGrid(id="date-times-example-2", columnDefs=columnDefs, rowData=rowData, defaultColDef=defaultColDef),
    ],
    style={"margin": 20},
)

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

```

Here is the JS you provided. Its in the assets folder and is loaded correctly to the app. I added var dagfuncs = dagfuncs ||{}; to the beginning so it would stop giving errors in console.

```javascript

dagfuncs.cleanDateColumn = (cellValue) => {
    if (cellValue === 'NaT') {
        returnValue = ''
    } else {
        returnValue = cellValue.includes('T') ? cellValue.split('T')[0] : cellValue
    }
    return returnValue;
}

dagfuncs.DateComparator = (filterLocalDateAtMidnight, cellValue) => {
    // converts timestamp to just date for easier user filtering
     const dateAsString = cellValue ? dagfuncs.cleanDateColumn(cellValue): null;
     if (dateAsString == null) {
         return 0;
     }

     // convert date string to date
     var tempDate = new Date(dateAsString);

     // convert dates to disregard timezones
     var userTimezoneOffset = tempDate.getTimezoneOffset() * 60000;
     const cellDate = new Date(tempDate.getTime() + userTimezoneOffset);

     // Now that both parameters are Date objects, we can compare
     if (cellDate < filterLocalDateAtMidnight) {
         return -1;
     } else if (cellDate > filterLocalDateAtMidnight) {
         return 1;
     }
     return 0;
 }

```

Here in the image what it looks like when I filter Less than 14/01/2024:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/7/2769414e7e2c8f0ecb57410ede05717df88381c3.png)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 14, 2024, 2:57pm UTC](https://community.plotly.com/t/table-date-filtering-not-working/76813/21 "2024-01-14T14:57:30Z")

</div>

@PlotlyDude,

It needs to be this:

```auto
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

```

> **[JavaScript and Dash AG Grid | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/javascript-and-the-grid)**
>
> Getting started with Dash AG Grid

[Next page](https://community.plotly.com/t/table-date-filtering-not-working/76813.md?page=2)