Align Multiple headers to the center in dash ag grid

Dash Python
1

I wanna align the columns headers ‘RFD’ and ‘Mechanically Fit’ to the center but i am unable to do so .
Please help me with this

columnDefs = [
    {"field": "Hub Name", 'rowSpan': {'function': "Hub Name"}, "sortable": False, "cellStyle": {'textAlign': 'center'}},
    {"field": "Fleet Name", "sortable": False, "cellStyle": {'textAlign': 'center'}},
    {
        'headerName': 'RFD',
        'children': [
            {'field': "RFD 0-1", 'headerName': '0 to 1 Months'},
            {'field': "RFD 1-3", 'headerName': '1 to 3 Months'},
            {'field': "RFD > 3", 'headerName': 'Greater Than 3 Months'}
        ],
    },
    {
        'headerName': 'Mechanically Fit',
        'children': [
            {'field': "M_fit 0-1", 'headerName': '0 to 1 Months'},
            {'field': "M_fit 1-3", 'headerName': '1 to 3 Months'},
            {'field': "M_fit > 3", 'headerName': 'Greater Than 3 Months'}
        ]
    }
]

I made multiple headers but the above 2 main headers are not aligning.

2

Hi @Lucifer !

Here how you can center the group headers:

  • Add in your assets/my_style.css (“my_style” can be any name)
.center-aligned-group-header .ag-header-group-cell-label {
    justify-content: center;
}
  • And add 'headerClass': 'center-aligned-group-header'in your columnDefs:
columnDefs = [
    {"field": "Hub Name", 'rowSpan': {'function': "Hub Name"}, "sortable": False, "cellStyle": {'textAlign': 'center'}},
    {"field": "Fleet Name", "sortable": False, "cellStyle": {'textAlign': 'center'}},
    {
        'headerName': 'RFD',
        'headerClass': 'center-aligned-group-header',
        'children': [
            {'field': "RFD 0-1", 'headerName': '0 to 1 Months'},
            {'field': "RFD 1-3", 'headerName': '1 to 3 Months'},
            {'field': "RFD > 3", 'headerName': 'Greater Than 3 Months'}
        ],
    },
    {
        'headerName': 'Mechanically Fit',
        'headerClass': 'center-aligned-group-header',
        'children': [
            {'field': "M_fit 0-1", 'headerName': '0 to 1 Months'},
            {'field': "M_fit 1-3", 'headerName': '1 to 3 Months'},
            {'field': "M_fit > 3", 'headerName': 'Greater Than 3 Months'}
        ]
    }
]
3 Likes
3

Thanks.
Looks like this code worked before but not working with the latest Ag Grid version? Thanks

4

Hi @entropy_l ,

Thanks to bring that up!
Indeed the last version enables sticky labels by default, contrary to older versions.
"suppressStickyLabel": True should be added like:

2 Likes
5

Thank you so much! This feature is hugely helpful and really appreciate your quickly helping to solve this again!