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 Name

When no header name is provided, the grid will derive the header name from the provided field. If the field value uses
Camel Case it will insert spaces between word breaks to build a readable header name.

columnDefs = [
    # header name will be 'Athlete'
    { 'field': 'athlete' },
    # header name will be 'First Name'
    { 'field': 'firstName' },
    # header name will be 'foo'
    { 'headerName': 'foo', 'field': 'bar' }
]

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

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.

Provided Header Component

Most applications will use the Provided Header Component. It provides functionality such as Sorting, Filtering and Column Menu.

You can provide an HTML template to the Default Header Component for simple layout changes. This is the default template used in AG Grid:

<div>
    <span><span>
    <span><span>
    <div>
        <span><span>
        <span><span>
        <span><span>
        <span><span>
        <span><span>
        <span><span>
    <div>
<div>

When you provide your own template, everything should work as expected as long as you re-use the same refs.

The ref parameters are used by the grid to identify elements to add functionality to. If you leave an element out of
your template, the functionality will not be added. For example if you do not specify eLabel then the column will not
react to click events for sorting.

Templates are not meant to let you configure the AG Grid header icons such as the filter and sort icons. If you are
looking to change those icons, check our Custom Icons section.

This example shows how to customize the provided template to show additional icons with the header name.

Set the template using headerComponentParams in the columnDefs or use defaultColDef to set for all Columns.


template_with_icon = """
<div>
    <span><span>
    <span><span>
    <div>
        <span><span>
        <span><span>
        <span><span>
        <span><span>
        <span><span>   
        <i><i>     
        <span><span>       
        <span><span>
    <div>
<div>
"""

columnDefs = [   
    {"field": "gold",  "headerComponentParams": {"template": template_with_icon}},
    # other columns...  
]

Note that in order to render HTML, it’s necessary to set dangerously_allow_code=True 

dag.AgGrid(          
    dangerously_allow_code=True

)

Note that specifying your own templates is compatible with other configurations:

Custom Header Component

Column Headers by default use the Provided Header Component. The default can be overridden with Custom Header Component.
Please see the AG Grid documentation for more information. Note that when using Custom Header Components, it’s necessary to include
your own JavaScript functions for sorting, filtering and column menus.