Dash AG-Grid : infinite scroll with a date filter BUG?

Dash Python
,
1

There seems to be a problem with date filters when in rowModelType="infinite" mode.

(as a follow up of the BigData Question)
@jinnyzor brought on a fine solution to handle filtering and sorting on very large tables on the server side by setting rowModelType="infinite".
The link with the solution (second code block) covers filtering of numbers and text columns, but not date filtering.
Trying to implement serverside date filtering, I bumped on an, I presume, unsolvable issue.

"""
Simple column filters - number filter and text filter
"""

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import pprint

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

# basic columns definition with column defaults
columnDefs = [
    {"field": "athlete", "filter": False},
    {"field": "country", "filter": False},
    {'field':'date',
        "headerName": "LLS_Date",
        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
    },
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "filter": True,
}


app.layout = html.Div(
    [
        dcc.Markdown("Date Filter Example"),
        dag.AgGrid(
            id="grid",
            rowModelType="infinite",
            columnDefs=columnDefs, 
            defaultColDef=defaultColDef
            ),
    ],
    style={"margin": 20},
)


@app.callback(
    Output("grid", "getRowsResponse"),
    Input("grid", "getRowsRequest"),
    #Input('tempFilter', 'value')
)
def serverside_date_filter(request):

    if request:
        print('TODO : PROCESS DATETIME FILTER on SERVER-SIDE...')
        pprint.pprint(request)
        return {"rowData": df.copy().to_dict("records")}



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

When rowModelType=“infinite”`, the agDateColumnFilter returns errors on the client:

Cannot read properties of undefined (reading ‘date’)

Did anyone encounter something similar?

Note that the serverside date filtering itself is not implementied yet.
The code works fine (except filtering) when commenting out the date filtering part in the col defs:

        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
2

Probably completely unrelated, but I have observed anomalous behaviours with dates when cached on the server:

3

Is there any chance of this to be resolved in the near future?

Are there any viable workarounds?

4

Hello @popo,

The issue is with your valueGetter, you need to use something like this if you expect there to be empty values.

"valueGetter": {"function": "params.data.date ? d3.timeParse('%d/%m/%Y')(params.data.date) | null"},
 "valueFormatter": {"function": "params.value"},