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
175 stars 25 forks source link

filterPlaceholder parameter of filterParams has no effect on Date filter #333

Open msz0ke opened 1 week ago

msz0ke commented 1 week ago

According to the docs, the filterPlaceholder parameter of filterParams can be assigned to Date filters. I have tried to provide them as various string formats, but it has no effect on the placeholder text, even when the browserDatePicker property is set to False.

I suspect this is not an issue with dash-ag-grid but with ag-grid itself: https://github.com/ag-grid/ag-grid/issues?q=label%3AAG-3735+is%3Aclosed. As the issue has been in their backlog for quite some time, I think it would be necessary to remove this parameter from the docs. If there is a way to override the locale (since the date format is locale dependent for the Date selector), could you please provide an example?

Related MRE:

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

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},
    {
        "headerName": "Date",
        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
        "filterParams": {
            "browserDatePicker": True,
            "filterPlaceholder": 'yyyy-mm-dd',
        },
    },
]

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

app.layout = html.Div(
    [
        dcc.Markdown("Date Filter Example"),
        dag.AgGrid(columnDefs=columnDefs, rowData=df.to_dict("records"), defaultColDef=defaultColDef),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=True)
AnnMarieW commented 1 week ago

Hi @msz0ke - You are correct that this looks like an issue in the upstream AG Grid library. The recommended workaround is to use a custom date picker component and you can find an example in the docs here https://dash.plotly.com/dash-ag-grid/cell-editor-components.

We can make a note of this issue in the docs, but I don't recommend removing it because the placeholder can be used in custom components and other data types.

Since there will be no changes to this library, this will be closed. This would be a great topic for the community forum to discuss other options for workarounds.