Text Wrap Group Header Name on AG Grid

Dash Python
1

Hello, how do I text wrap a long group header name on my AG Grid? In my code below, it is the header containing the description. I’ve tried many different ways, but nothing is working.

Here is my grid:

reg_data = pd.read_excel('Information.xlsx', sheet_name=region, engine='openpyxl')

dag.AgGrid(
            id="reg_info_table",
            columnDefs=[],
            rowData=reg_data,
            defaultColDef={
                "cellStyle": {"textAlign": "center","wordBreak": "break-word","lineHeight": "unset"},
                "resizable": True,
                "wrapText": True,
                "autoHeight": True,
                },
            dashGridOptions={
                'groupHeaderHeight': 60,
                'headerHeight': 40,
                "animateRows": False
            },
            style={"height": 800, "width": "100%"}
            )

Here is my column info:

region_dict = {'South_America': {'A': ['1','2'], 'B': ['1','2','3'], 'Description': ['very very very very very very long text','very very very very very very long text','very very very very very very long text']}}

columnDefs = [{"headerName": " ",
                    'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                    "children": [{
                            "headerName": " ",
                            'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                            "children": [{
                                "headerName": " ",
                                'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                                "children": [{
                                    "field": "Product",
                                    "headerClass": "center-aligned-header",
                                    "pinned": True,
                                        }]}]}]},
                {"headerName": region_dict[region]['A'][0],
                'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                "children": [{
                            "headerName": region_dict[region]['B'][0],
                            'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                            "children": [{
                                "headerName": region_dict[region]['Description'][0],
                                "headerClass": "text-wrap-group-header", 
                                'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                                "children": [
                                    {"field": "Evaluation","headerClass": "center-aligned-header"},
                                    {"field": "Observations","headerClass": "center-aligned-header"},],
                                },]},
                            {"headerName": region_dict[region]['B'][1],
                            'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                            "children": [{
                                "headerName": region_dict[region]['Description'][1],
                                "headerClass": "text-wrap-group-header",
                                'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                                "children": [
                                    {"field": "Evaluation","headerClass": "center-aligned-header"},
                                    {"field": "Observations","headerClass": "center-aligned-header"},],
                                }]}]},
                {"headerName": region_dict[region]['A'][1],
                "headerClass": "center-aligned-group-header","suppressStickyLabel": True,
                "children": [{
                            "headerName": region_dict[region]['B'][2],
                            'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                            "children": [{
                                "headerName": region_dict[region]['Description'][2],
                                "headerClass": "text-wrap-group-header",
                                'headerClass': 'center-aligned-group-header','suppressStickyLabel': True,
                                "children": [
                                    {"field": "Evaluation","headerClass": "center-aligned-header"},
                                    {"field": "Observations","headerClass": "center-aligned-header"},
                                    ]}]}]}]

my css file:

.center-aligned-group-header .ag-header-group-cell-label {
  justify-content: center !important;
  white-space: normal !important;
  text-align: center !important;
  word-wrap: break-word !important;
}

.center-aligned-header .ag-header-cell-label {
  justify-content: center;
}

.text-wrap-group-header .ag-header-group-cell-label {
  white-space: normal;
}
2

Hi @aliew and welcome to the Dash community.

The auto height on group headers was introduced in AG Grid 32.1. Dash AG Grid’s latest release uses AG Grid 31.3, so that feature is not available yet.

If you refer to the upstream AG Grid docs, be sure to reference the correct version for your dash version. Here’s the link for 31.3.0
https://www.ag-grid.com/archive/31.3.0/

In the meantime, you can get part way there with adding word wrap with css


.ag-theme-alpine .ag-header-group-text {
     white-space: normal;
}

I’m not sure how to handle the auto height. Maybe set a fixed width for the columns with the long text and set a height that works.

1 Like