Hide Row within Grouped Rows

Hi everyone! I have a tricky question this time:

Given the code below, how can I set the row height to zero if the sport is “Swimming” (i.e., hide the Swimming row while still considering its entries for the age average and total)?

Thank you!

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


app = Dash(__name__)


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

columnDefs = [
    # Row group by country and by year is enabled.
    {"field": "country",  "rowGroupIndex": 1, "rowGroup": True, "hide": True},
    {"field": "year",  "rowGroupIndex": 2, "rowGroup": True, "hide": True},
    {"field": "sport", "rowGroupIndex": 3, "rowGroup": True, "hide": True},
    {"field": "athlete", "rowGroupIndex": 4, "rowGroup": True, "hide": True},
    {"field": "age", "aggFunc": "avg"},
    {"field": "date", "hide": True},
    {"field": "total", "aggFunc": "sum",},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={
                "groupDisplayType": 'singleColumn',
                "groupAllowUnbalanced ": True,
                "animateRows": False,
                "maintainColumnOrder": True,
                "autoSizeColumns": True,
                "groupIncludeTotalFooter": True,
                "suppressAggFuncInHeader": True,
                "groupRemoveLowestSingleChildren": True,
                "autoGroupColumnDef": dict(width=500,
                                           field="athlete",
                                           headerName="Name",),
                "getRowHeight": "params => params.data && params.data.sport === 'Swimming' ? 0 : 40",
            },
            defaultColDef=dict(filter=True),
            id="grouped-grid",
            enableEnterpriseModules=True,
            licenseKey=os.environ['AGGRID_KEY'],
        ),
    ]
)


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

Not too tricky :slight_smile:

 "getRowHeight": {"function": "params.node.group && params.node.groupData['ag-Grid-AutoColumn'] === 'Swimming' ? 0: 40"},

When trying to write the function, it’s helpful to see what params looks like. You can inspect it in the browser console using this:

 "getRowHeight": {"function": "log(params)"}

1 Like

You are a LEGEND! Thank you so much!!

1 Like