Dash-ag-grid row grouping breaks date filter


I am trying to follow these examples to set up a date filter:

The examples work fine except if I try to enable row grouping in the dash grid options:

"rowGroupPanelShow": 'always',

Then if I try to group any rows I get a bunch of undefined errors:

I assume it is something simple that needs to be changed with the valueGetter or valueFormatter, but I can’t figure it out. Or I think I read something about registering functions (maybe that was only for the sideBar? I can’t remember.)

Any help would be appreciated. Thanks!

Full code below:


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

app = Dash(__name__)

df = pd.read_csv(

# basic columns definition with column defaults
columnDefs = [
    {"field": "athlete", "filter": False},
    {"field": "country", "filter": False},
        "headerName": "Date",
        "filter": "agDateColumnFilter",
        # "valueGetter": {"function": "params.data.date ? d3.timeParse('%d/%m/%Y')(params.data.date)"},
        # "valueFormatter": {"function": "params.data.date ? params.data.date"},
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        # "valueFormatter": {"function": "params.data.date"},
        "valueFormatter": {"function": "handle_na(params.value)"},
        "filterParams": {
            "browserDatePicker": True,
            "minValidYear": 2000,
            "maxValidYear": 2021,

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

    "enableRowGroup": True,

dashGridOptions = {
        # Grouping / Sidebar
        "sideBar": True,
        "rowGroupPanelShow": 'always',
        # Tooltip
        "tooltipShowDelay": 0,
        "tooltipHideDelay": 2000,
        # Other
        "animateRows": True,
        "rowSelection": "multiple",
        "suppressAggFuncInHeader": True,

app.layout = html.Div(
        dcc.Markdown("Date Filter Example"),

    style={"margin": 20},

if __name__ == "__main__":

tried writing this function js didn’t work

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

dagfuncs.handle_na = function(value, filna="") {
    if (isNaN(value)){
        return filna
    return value

Hi @daflamingpotato

Can you include a complete minimal example that reproduces the issue?


You might find this post helpful:

Updated original post with the full code

dash 2.14.2
dash-ag-grid 2.4.0

I think I’ve almost got it now.

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

The issue is the value formatter can’t access the params.data.date in grouping because the date cells for the grouping are null.

Is there a built-in locale, like with number format, that works with d3 timeParse / timeFormat? And would replace NaN with ‘’?


Managed to get it working. Somehow I was using timeParse instead of timeFormat on the formatter.

"valueGetter": {"function": "params.data ? d3.timeParse('%d/%m/%Y')(params.data.date) : ''"},
"valueFormatter": {"function": "params.value !== '' ? d3.timeFormat('%d/%m/%Y')(params.value) : ''"},
1 Like