plotly / dash-ag-grid

Dash AG Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids.
https://dash.plotly.com/dash-ag-grid
MIT License
176 stars 28 forks source link

agDateColumnFilter stops working with enableEnterpriseModules=True #334

Open celia-lm opened 1 month ago

celia-lm commented 1 month ago

Description of the bug

The agDateColumnFilter stops working with enableEnterpriseModules=True (no key added, though).

With the attached app, if we start with enableEnterpriseModules=False the filter works, but once we have enabled it (enableEnterpriseModules=True), it’s not possible to disable it (enableEnterpriseModules=False doesn't make the date filter work again). I believe this is because the enterprise settings are cached or something?

The bug also happens if I load the app directly with enableEnterpriseModules=True and the callback commented.

In any case, the expected behaviour is for the agDateColumnFilter to work with enterpriseModules enabled and disabled.

https://github.com/user-attachments/assets/ef44482a-1ff4-420b-b3cb-4025a1925cf2

MRE

Python 3.10 dash==2.18.1 dash-ag-grid==31.2.0

import dash
from dash import html, dcc, Input, Output, callback
import dash_ag_grid as dag
from dash_ag_grid import AgGrid
import pandas as pd
# Sample data

print(dag.__version__)

data = [
    {
        "SOURCE": "A",
        "VESSEL_NAME": "Vessel 1",
        "FIXTURE_DATE": "2024-01-15",
        "LAYCAN_FROM": "2024-01-10",
        "DISCHARGE_ARRIVAL": "2024-02-01",
    },
    {
        "SOURCE": "B",
        "VESSEL_NAME": "Vessel 2",
        "FIXTURE_DATE": "2024-03-15",
        "LAYCAN_FROM": "2024-03-10",
        "DISCHARGE_ARRIVAL": "2024-04-01",
    },
    {
        "SOURCE": "C",
        "VESSEL_NAME": "Vessel 3",
        "FIXTURE_DATE": "2024-05-15",
        "LAYCAN_FROM": "2024-05-10",
        "DISCHARGE_ARRIVAL": "2024-06-01",
    },
]

# Column definitions

columnDefs = [
    {"field": "SOURCE", "headerName": "Source Details", "filter": "agTextColumnFilter"},
    {
        "field": "VESSEL_NAME",
        "headerName": "Vessel Name",
        "filter": "agTextColumnFilter",
    },
    {
        "field": "FIXTURE_DATE",
        "headerName": "Fixture Date",
        "filter": "agDateColumnFilter",
        "editable": True,
    },
    {
        "field": "LAYCAN_FROM",
        "headerName": "Laycan From",
        "filter": "agDateColumnFilter",
        "editable": True,
    },
    {
        "field": "DISCHARGE_ARRIVAL",
        "headerName": "Discharge Arrival",
        "filter": "agDateColumnFilter",
        "editable": True,
    },
]

# Create the Dash app
app = dash.Dash(__name__)

# Define the layout
app.layout = html.Div(
    [
        dcc.RadioItems(
            options=['enableEnterpriseModules=True', 'enableEnterpriseModules=False'], 
            value='enableEnterpriseModules=False', 
            id='switch'
         ),
        AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=data.,
            enableEnterpriseModules=False,
            className="ag-theme-alpine",
            defaultColDef={
                "resizable": True,
                "sortable": True,
                "floatingFilter": True,
            },
            style={"height": "500px", "width": "100%"},
        )
    ]
)

@callback(
    Output('grid', 'enableEnterpriseModules'),
    Input('switch', 'value'),
    prevent_initial_call=True
)
def updateEnterpriseSelection(value):
    if 'True' in value:
        return True
    else:
        return False

# Run the app
if __name__ == "__main__":
    app.run_server(debug=True)
celia-lm commented 1 month ago

It seems to be related to the filterValueGetter. This workaround works for me:

    {
        "field": "FIXTURE_DATE",
        "headerName": "Fixture Date",
        "filter": "agDateColumnFilter",
        "filterValueGetter": {"function": "d3.timeParse('%Y-%m-%d')(params.data.date)"},
        "editable": True,
    },