Column Headers

Each column in a grid has a header that displays the column name and provides access to features like sorting,
filtering, and column menus. These column headers are configurable.

Header Height

Use the following properties to adjust the height of headers.

Those properties are set using dashGridOptions, the example below uses the properties:

dashGridOptions = {
    'groupHeaderHeight': 75,
    'headerHeight': 150,
    'floatingFiltersHeight': 40,
}

Text Orientation

Text labels on headers display horizontally by default. If you want to change the text label orientation, you have to
modify the CSS classes used for headers and set the necessary header heights using the properties above.

The following example shows how you can provide a unique look and feel to the headers modifying some CSS
classes .ag-header-* and setting the header heights using dashGridOptions:

View the CSS classes used for this example

These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

.header1 .ag-header-cell-label {
    /*Necessary to allow for text to grow vertically*/
    height: 100%;
    padding: 0 !important;
}

.header1 .ag-header-group-cell {
    font-size: 50px;
}

.header1 .ag-header-cell-label .ag-header-cell-text {
    /*Force the width corresponding at how much width
      we need once the text is laid out vertically*/
    width: 55px;
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    line-height: 2em;
    margin-top: 60px;
}
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"
)

column_names = ["athlete", "country", "sport", "total"]

columnDefs = [
    {"headerName": "Athlete Details", "children": [{"field": i} for i in column_names]}
]

defaultColDef = {"editable": True, "filter": True, "floatingFilter": True}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="toggle-metals-columns",
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            dashGridOptions={
                'groupHeaderHeight': 75,
                'headerHeight': 150,
                'floatingFiltersHeight': 40,
                "animateRows": False
            }
        ),
    ],
    className="header1",
)

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

Auto Header Height

The column header row can have its height set automatically based on the content of the header cells. This is most
useful when used together with custom header components or when using the wrapHeaderText column property.

To enable this, set autoHeaderHeight=True on the column definition you want to adjust the header height for. If more
than one column has this property enabled, then the header row will be sized to the maximum of these column’s header
cells so no content overflows.

The example below demonstrates using the autoHeaderHeight property in conjunction with the wrapHeaderText property,
so that long column names are fully displayed.
Note that the long column header names wrap onto another line. Try making a column smaller by dragging the resize handle
on the column header, observe that the header will expand so the full header content is still visible.

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"
)
columnDefs = [
    {"field": "athlete", "headerName": "The full Name of the athlete"},
    {"field": "age", "headerName": "The number of Years since the athlete was born"},
    {"field": "country", "headerName": "The Country the athlete was born in"},
    {"field": "sport", "headerName": "The Sport the athlete participated in"},
    {"field": "total", "headerName": "The Total number of medals won by the athlete"},
]

defaultColDef = {
    "initialWidth": 200,
    "wrapHeaderText": True,
    "autoHeaderHeight": True,
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="auto-header-height-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
            dashGridOptions={"animateRows": False}
        ),
    ]
)

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

Header Tooltips

Add tooltips to headers by setting headerTooltip on the column definitions. You can also configure the time it takes
for a tooltip to display on hover, using tooltipShowDelay on dashGridOptions. The default is 2000 ms.

Here, we set tooltips for all columns, except “country”, and set the tooltipShowDelay to 500 ms.

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"
)

columnDefs = [
    {"field": "athlete", "headerTooltip": "The athlete's name"},
    {"field": "age", "headerTooltip": "The athlete's age"},
    {"field": "country"},
    {"field": "sport", "headerTooltip": "The sport the medal was for"},
    {"field": "total", "headerTooltip": "The total number of medals"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="header-tooltips-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            dashGridOptions={"tooltipShowDelay": 500, "animateRows": False},
        ),
    ]
)

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