HeaderTemplateDirective

Updated on Jun 18, 2025

Represents the column header cell template of the Grid (more information and example). Use this directive to customize the table header cell for a column. To define a header template, nest an <ng-template> tag with the kendoGridHeaderTemplate directive inside the <kendo-grid-column> tag.

The template context is set to the current column. The following additional fields are available:

• column—An instance of the ColumnComponent option.
• columnIndex—The current column index.

typescript

<kendo-grid>
  <kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
      Header for {{ column.field }} (index: {{ columnIndex }})
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Selector

[kendoGridHeaderTemplate]