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.

headerHeight - The height in pixels for the row containing the column label header. If not specified, it uses the
theme value of header-height.
groupHeaderHeight - The height in pixels for the rows containing header column groups. If not specified, it
uses headerHeight.
floatingFiltersHeight - The height in pixels for the row containing the floating filters. If not specified, it uses
the theme value of header-height.
pivotHeaderHeight (AG Grid Enterprise) - The height in pixels for the row containing the columns when in pivot mode.
If not specified, it uses headerHeight.
pivotGroupHeaderHeight (AG Grid Enterprise) - The height in pixels for the row containing header column groups when
in pivot mode. If not specified, it uses groupHeaderHeight.

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;
}

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.

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.
See Tooltips for details.

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