Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Column Headers

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.

Custom Header

If you want to customise the contents and / or behaviour of the header, then please refer to the section on Header Components.

Header Height

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

headerHeight The height for the row containing the column label header. If not specified the default is 25px.
groupHeaderHeight The height for the rows containing header column groups. If not specified, it uses headerHeight.
floatingFiltersHeight The height for the row containing the floating filters. If not specified the default is 20px.
pivotHeaderHeight The height for the row containing the columns when in pivot mode. If not specified, it uses headerHeight.
pivotGroupHeaderHeight The height for the row containing header column groups when in pivot mode. If not specified, it uses groupHeaderHeight.

All these properties also have setter methods that can be called from the api and will change the header heights dynamically.

setHeaderHeight(heightInPx) Sets the height for the row containing the column label header.
setGroupHeaderHeight(heightInPx) Sets the height for the rows containing header column groups.
setFloatingFiltersHeight(heightInPx) Sets the height for the row containing the floating filters.
setPivotHeaderHeight(heightInPx) Sets the height for the row containing the columns when in pivot mode.
setPivotGroupHeaderHeight(heightInPx) Sets the height for the row containing header column groups when in pivot mode.

Text Orientation

By default, the text label for the header is display horizontally, ie 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.

Header Height and Text Orientation Example

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

  • The header heights have all been changed in the gridOptions: ... //Group columns groupHeaderHeight:75, //Label columns headerHeight: 150, //Floating filter floatingFiltersHeight:50, //Pivoting, requires turning on pivot mode. Label columns pivotGroupHeaderHeight:50, //Pivoting, requires turning on pivot mode. Group columns pivotGroupHeaderHeight:100, ...
  • The grouped column header Athlete Details has an 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-cell-label-container{ /*Necessary to allow for text to grow vertically*/ height: 100%; } .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 at how much width we need once the text is layed 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 be 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 set to null, it might reuse other values. To see all the interactions check the properties descriptions at the top of the page

Refresh Headers and Footers

If you call api.recomputeAggregates(), all header and footer rows will subsequently get ripped out and redrawn to show the new aggregate values. If you want to refresh all headers and footers without recomputing the aggregates, you can call api.refreshCells() - useful if you want to refresh for reasons other than the aggregates being recomputed.