Dash AG Grid - How to style the floating filter?

Dash Python
1

I have a Dash AG Grid with a floating filter and column groups. I have applied the cellClass and headerClass but cannot seem to find a way to style the floating filter as well. I can use the aria-colindex but then it will style every AG Grid in my app. Can I somehow only style select floating filters for the the grid id grp?

assests/style.css

.sports-column-groups-header-background-color, [aria-colindex="4"], [aria-colindex="5"], [aria-colindex="6"],
[aria-colindex="7"], [aria-colindex="8"]{
    background-color: yellow;
}

app.py

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

app = Dash(__name__)

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

participant = [
    {"field": "athlete"},
    {"field": "age"},
    {"field": "country"},
]

medals = [
    {"field": "total"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
]

noGroups = participant + medals

columnDefs = [
    {
        "headerName": "Athlete Details",
        "children": [
            {"field": "athlete", "pinned": True},
            {"field": "country"},
            {"field": "age"},
        ],
    },
    {
        "headerName": "Sports Results",
        'headerClass': f'sports-column-groups-header-background-color',
        "suppressStickyLabel": True,
        "openByDefault": True,
        "children": [
            {"field": "sport", 'cellClass': 'sports-column-groups-header-background-color',
             'headerClass': 'sports-column-groups-header-background-color'},
            {"field": "gold", "columnGroupShow": "open", 'cellClass': 'sports-column-groups-header-background-color',
             'headerClass': 'sports-column-groups-header-background-color'},
            {"field": "silver", "columnGroupShow": "open", 'cellClass': 'sports-column-groups-header-background-color',
             'headerClass': 'sports-column-groups-header-background-color'},
            {"field": "bronze", "columnGroupShow": "open", 'cellClass': 'sports-column-groups-header-background-color',
             'headerClass': 'sports-column-groups-header-background-color'},
            {"field": "total", "columnGroupShow": "closed", 'cellClass': 'sports-column-groups-header-background-color',
             'headerClass': 'sports-column-groups-header-background-color'},
        ],
    },
]

columnDefs2 = [
    {
        "headerName": "Athlete Details",
        "children": [
            {"field": "athlete", "width": 180},
            {"field": "age", "width": 90},
            {"field": "country", "width": 140},
        ],
    },
    {
        "headerName": "Sports Results",
        "children": [
            {"field": "sport", "width": 140},
            {"field": "total", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "closed"},
            {"field": "gold", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "open"},
            {"field": "silver", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "open"},
            {"field": "bronze", "width": 100, "filter": "agNumberColumnFilter", "columnGroupShow": "open"},
        ],
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grps",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"width": 200, 'floatingFilter': True, 'filter': True, },
            dashGridOptions={"animateRows": False},
        ),
        html.P('CSS is styling the table below, which makes sense, but how do I only style filters in the above table'),
        dag.AgGrid(
            id="no-grps",
            rowData=df.to_dict("records"),
            columnDefs=noGroups,
            defaultColDef={"width": 200, 'floatingFilter': True, 'filter': True, },
            dashGridOptions={"animateRows": False},
        )
    ],
)

if __name__ == "__main__":
    app.run(debug=True)
2 
#grps [aria-colindex="5"] {
    background-color: #FECB52 !important;
}
1 Like
3

This will work if you dont allow the columns to be moved:

.sports-highlight {
    .sports-column-groups-header-background-color {
        background-color: yellow;
    }

    [aria-colindex="4"], [aria-colindex="5"], [aria-colindex="6"],
    [aria-colindex="7"], [aria-colindex="8"] {
        background-color: yellow;
    }
}

dag.AgGrid(
            id="grps",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"width": 200, 'floatingFilter': True, 'filter': True, },
            dashGridOptions={"animateRows": False},
            className="ag-theme-alpine sports-highlight"
        ),
2 Likes
4

Works perfectly, thank you. I do not allow users to move columns :slight_smile: and I can also remove the headerClass and cellClass and just style the column index.

1 Like
5

@SCooper,

I found this issue on github: How can I add a class to the ag-grid floating filter? · Issue #6661 · ag-grid/ag-grid · GitHub

This mentions the problem encountered here, and that the headerClass does not flow down to the AG Grid floating-filters.

6

This is an outstanding feature with reference AG-7255 that there is not a property to add a class to the floating filter .

There is a very hacky work around that I found on that ticket.

https://plnkr.co/edit/B6K8xfuZrOxZ10v5?open=main.js

1 Like
7

Not sure how we’d go about to apply this in dash. I’ll take some time to see if I can figure some workaround. :slight_smile: