JavaScript Data GridColumn Headers
javascript logo

Each column has a header at the top that typically displays the column name and has access to column features, such as sorting, filtering and a column menu. This page explains how you can manage the headers.

Header Height

These properties can be used to change the different heights used in the headers.

Text Orientation

By default, the text label for the header is display horizontally, i.e. as normal readable text. To display the text in another orientation you have to provide your own CSS to change the orientation and also provide the adequate header heights using the appropriate grid property.

Example: Header Height and Text Orientation

The following example shows how you can provide a unique look and feel to the headers. Note that:

  • The header heights have all been changed via grid options:
const gridOptions = {
    // Group columns
    groupHeaderHeight: 75,

    // Label columns
    headerHeight: 150,

    // Floating filter
    floatingFiltersHeight: 50,

    // Pivoting, requires turning on pivot mode. Label columns
    pivotHeaderHeight: 100,

    // Pivoting, requires turning on pivot mode. Group columns
    pivotGroupHeaderHeight: 50,

    // other grid options ...
}
  • The grouped column header Athlete Details has a specific style applied to it to make it bigger. Note that the style is slightly different depending if pivoting or not:
.ag-pivot-off .ag-header-group-cell {
    font-size: 50px;
    color: red;
}

.ag-pivot-on .ag-header-group-cell {
    font-size: 25px;
    color: green;
}
  • The column labels have CSS applied to them so they are displayed vertically.
.ag-header-cell-label {
    /* Necessary to allow for text to grow vertically */
    height: 100%;
    padding: 0 !important;
}

.ag-header-cell-label .ag-header-cell-text {
    /* Force the width corresponding to how much width
    we need once the text is laid out vertically */
    width: 30px;
    transform: rotate(90deg);
    margin-top: 50px;
    /* Since we are rotating a span */
    display: inline-block;
}
  • The floating filters are using a much bigger area and the font used is bigger and bolder.
.ag-floating-filter-body input {
    height: 49px;
}

.ag-floating-filter-button {
    margin-top: -49px;
}

.ag-floating-filter-button button {
    height: 49px
}

.ag-floating-filter-body input {
    font-size: 15px;
    font-weight: bold;
}
  • The styling of the column labels have also been tweaked depending if pivoting or not.
.ag-pivot-off .ag-header-cell-label {
    color: #8a6d3b;
}

.ag-pivot-on .ag-header-cell-label {
    color: #1b6d85;
    font-weight: bold;
}

Dynamic Header Heights

As you can see in the example below, if you change any of the header heights, this change will be reflected automatically. Note how if the value is cleared (set to undefined), it might reuse other values. To see all the interactions check the properties descriptions at the top of the page.

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.

When autoHeaderHeight=true the Grid automatically disables Span Header Height, see: Suppress Span Header Height.

Header Tooltips

You can provide a tooltip to the header using colDef.headerTooltip.

The example below shows header tooltips. Note the following:

  • All the columns, apart from Country and Year, have a header tooltip set.
  • We have set the Grid tooltipShowDelay property to 500ms to make the tooltips appear sooner.

Header Templates

You can provide a header template used by the default header component for simple layout changes. If you want to change the behaviour, please look at creating your own Custom Header Component. The template for the default header is specified in columnDef.headerComponentParams.template.

This is the default template used in AG Grid:

<div class="ag-cell-label-container" role="presentation">
    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
    <span ref="eFilterButton" class="ag-header-icon ag-header-cell-filter-button" aria-hidden="true"></span>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <span ref="eText" class="ag-header-cell-text"></span>
        <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
        <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
        <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
        <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
        <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
    </div>
</div>

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

RefDescription
eMenuThe container where the column menu icon will appear to enable opening the column menu.
eFilterButtonThe container where the column filter icon will appear to enable opening the filter (when using columnMenu = 'new').
eLabelThe container where there is going to be an onClick mouse listener to trigger the sort.
eTextThe text displayed on the column.
eFilterThe container with the icon that will appear if the user filters this column (when using columnMenu = 'legacy').
eSortOrderIn case of sorting on multiple columns, this shows the index that represents the position of this column in the order.
eSortAscIn case of sorting ascending the data in the column, this shows the associated icon.
eSortDescIn case of sorting descending the data in the column, this shows the descending icon.
eSortNoneIn case of no sort being applied, this shows the associated icon. Note this icon by default is empty.

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 icons. If you are looking to change the icons, check our icon docs.

Example: Simple Header Templates

In the following example you can see how we are reusing the default grid template to change the layout of the elements.

const gridOptions = {
    defaultColDef: {
        width: 100,
        headerComponentParams: {
            template:
                `<div class="ag-cell-label-container" role="presentation">
                  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
                  <span ref="eFilterButton" class="ag-header-icon ag-header-cell-filter-button"></span>
                  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
                    <span ref="eSortOrder" class="ag-header-icon ag-sort-order"></span>
                    <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>
                    <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>
                    <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>
                    ** <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>
                    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
                  </div>
                </div>`
        }
    },

    // other grid options ...
}

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

  • suppressHeaderMenuButton is specified in: Athlete, Country, Date and Bronze columns
  • sortable=false is specified in: Age, Year, Sport, Silver and Total columns
  • Gold is the only column that doesn't have sortable=false or suppressHeaderMenuButton

Custom Header

Header templates are meant to be used for simple UI customisation, if you need to have more control over the header check how to create your own Header Components.