Dash AG Grid Date Filter

Dash Python
1

Hi!

I have some issues in filtering my data using Dash AG Grid.

date colum:

0    2015-01-08
1    2015-01-08
2    2015-01-15
3    2015-01-15
4    2015-01-15
5    2015-01-15
Name: Fecha de monitoreo, dtype: datetime64[ns] datetime64[ns]

(Type: datetime)

Acording with AG grid documentation i have to change to str:

Note - the filter works for dates only, not datetime. So if your date string looks like “2023-01-01T22:00:00” you will first need to change it to date string i.e. “2023-01-01”

colName_dates = 'Fecha de monitoreo'
df[colName_dates] = df[colName_dates].dt.strftime('%d-%m-%Y')

got this:



0     08-01-2015
1     08-01-2015
2     15-01-2015
3     15-01-2015
4     15-01-2015
5     15-01-2015
Name: Fecha de monitoreo, dtype: object object

Note: i changed date format

So then, i use this code:

    dash_grid = dag.AgGrid(
        
        id="dash_grid",
        rowData=df.to_dict("records"),
        columnDefs=[
        {
            "field": colName_dates, 
            "filter": "agDateColumnFilter",
            "valueGetter": {"function": f"d3.timeParse('%d-%m-%Y')(params.data.{colName_dates})"},
            "valueFormatter": {"function": f"params.data.{colName_dates}"},
  
        },
            {"field": colName_station, "filter": "agTextColumnFilter"},
            {"field": parameter, "filter": "agNumberColumnFilter"},            
        ],
        defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":125},

    )

It display well the AG Grid, but when filter the dates columns, doesnt works.
(The others columns works fine the filter)

what am I doing wrong?

image
image916×659 28.4 KB

**The filter doesnt works**

image

2

Hi @Reveur

Your example looks correct to me.

Can you try an example in the docs to see if it works?

It might be an issue with the browser or locale

You can see an example at the bottom of this page:

Could you please make a minimal example with some sample data? It should be so that I can copy and run your code and I can see the same error.

3

Hi!

I fix that:

    dash_grid = dag.AgGrid(
        
        id="dash_grid",
        rowData=df.to_dict("records"),
        columnDefs=[
        {
            "field": colName_dates, 
            "filter": "agDateColumnFilter",
            "valueGetter": {"function": f"d3.timeParse('%d-%m-%Y')(params.data[\"{colName_dates}\"])"},
            "valueFormatter": {"function": f"params.data[\"{colName_dates}\"]"},
  
        },
            {"field": colName_station, "filter": "agTextColumnFilter"},
            {"field": parameter, "filter": "agNumberColumnFilter"},            
        ],
        defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":125},

    )

Those lines are JS

            "valueGetter": {"function": f"d3.timeParse('%d-%m-%Y')(params.data[\"{colName_dates}\"])"},
            "valueFormatter": {"function": f"params.data[\"{colName_dates}\"]"},

The error was on my variable colName_dates = 'Fecha de monitoreo' (have white spaces), so i ask to ChatGPT how to write those lines with white spaces on JS and give me that.

I know nothing about JS, but it works.

Mb the Dash team can add this tip.

1 Like
4

Hello! I have a question about dates. Please tell me, is it possible to filter only the date in a column with values like 2023-07-20 19:22:41 (change it only temporarily to the required format), but leave the column untouched, without eventually bringing it to the form 2023-07-20?

5

Hello @sergeyvyazov,

Yes, check out my custom date filter here:

1 Like
6

Thanks a lot! Used this code and it works. But in the case of infinite scrolling, when the params date is requested when scrolling, an error occurs, since the params date is undefined

7

Then you need to just figure out how to test to make sure the params.data exists.