`suppressHeaderMenuButton` doesn't seem to work in combination with `floatingFilter`

[huong-li-nguyen]

Hey guys,

Issue 1

I am currently trying to replicate an example in the official AG-grid docs here: https://ag-grid.com/javascript-data-grid/floating-filters/ where the following applies:

• filter = True for all the columns by default
• floatingFilter = True for the first two columns
• suppressHeaderMenuButton = True for the two columns where floatingFilter = True

I am trying to turn off the filter menu button for the columns where there is a floatingFilter present as from a UI perspective it's confusing to have that menu twice. In the original AG-grid docs, this seems to be achieved via suppressHeaderMenuButton = True and filter = False.

However, when I am trying to replicate the same in the dash-app it doesn't seem to work. If I set filter = False the floatingFilter disappears. If I don't specify it, the menu is visible even if suppressHeaderMenuButton = True. Any idea whether the configurations for the columns are conflicting or is this an actual bug?

Issue 2

Is there a way to persist the value that I have entered in the floatingFilter? Currently the selection disappears if I am refreshing the page.

Screenshot

What I have circled in blue should not be present anymore:

Code

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd
import plotly.express as px

df = px.data.gapminder()

app = Dash(__name__)

columnDefs = [
    {"field": "country", "floatingFilter": True, "suppressHeaderMenuButton": True},
    {"field": "continent", "floatingFilter": True, "suppressHeaderMenuButton": True},
    {"field": "year"},
    {"field": "lifeExp", "cellDataType": "numeric"},
    {"field": "pop", "cellDataType": "numeric"},
    {"field": "gdpPercap", "cellDataType": "euro"},
]

grid = dag.AgGrid(
    id="get-started-example-basic",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
    defaultColDef={
            "resizable": True,
            "sortable": True,
            "filter": True,
        }
)

app.layout = html.Div([grid])

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

Version

dash                      2.16.1
dash_ag_grid              31.0.1

Any help appreciated! 🙏

[AnnMarieW]

Hi @huong-li-nguyen

When you use the AG Grid docs, it's important to use the right version. AG Grid does minor releases every few weeks and major version about every 6 months.

Our dash-ag-grid is based on the grid's V31.0.3. but the current upstream AG Grid docs are on V31.2.0. They have renamed "suppressHeaderMenuButton". It used to be called "suppressMenu" If you use the old prop name it will work.

You can see this used in the Dash docs on this page https://dash.plotly.com/dash-ag-grid/floating-filters

All the links in the dash docs go to the correct archived version of the docs - for example:

https://www.ag-grid.com/archive/31.0.2/react-data-grid/filter-conditions/

---

Another tip - If things don't work as expected, check the console for error messages:

[huong-li-nguyen]

Ah yes, I see! @AnnMarieW being the life-saver as always 😄 🚀 That clarifies a lot, and the other argument suppressMenu works well! I'll make sure to look up the right docs / console errors next time!

[huong-li-nguyen]

Forgot to ask about the second issue - is there a way how we can persist the values inserted inside the floatingFilter? Currently the selection disappears if I am refreshing the page 🤔

[AnnMarieW]

https://dash.plotly.com/dash-ag-grid/persistence#persisted-filter-selection

Did you try :

        dag.AgGrid(
            persistence=True,
            persisted_props=["filterModel"]
        ),

[huong-li-nguyen]

Yes, I did try that! But I just realized that this just doesn't seem to work in Vizro 😅 It seems to work in a pure dash app, so let me investigate on our side! Thanks again!