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.
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
This is the default template used in ag-grid
When you provide your own template, everything should work as expected as long as you reuse the same refs.
|eLabel||The container where there is going to be an onClick mouse listener to trigger the sort.|
|eText||The text displayed on the column|
|eFilter||The container with the icon that will appear if the user filters this column.|
|eSortOrder||In case of sorting my multiple columns, this shows the index that represents the position of this column in the order.|
|eSortAsc||In case of sorting ascending the data in the column, this shows the associated icon.|
|eSortDesc||In case of sorting descending the data in the column, this shows the descending icon.|
|eSortNone||In 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
then the column will not react to click events for sorting.
In the following example you can see how we are reusing the default grid template to change the layout of the elements.
Note that specifying your own templates is compatible with other configurations:
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.|
The height for the rows containing header column groups. If not specified, it uses
|floatingFiltersHeight||The height for the row containing the floating filters. If not specified the default is 20px.|
The height for the row containing the columns when in pivot mode. If not specified, it uses
The height for the row containing header column groups when in pivot mode. If not specified, it uses
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.|
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.
The following example shows how you can provide a unique look & feel to the headers. Note that:
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
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.
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.