New to Kendo UI for Vue? Start a free 30-day trial

Header Template

Updated on Jun 29, 2026

The Kendo UI for Vue Native Grid enables you to customize the rendering of its headers.

Getting Started

To implement a custom header:

Use the headerCellRender prop that will customize all header cells.
Set theheaderCell option of the column to define a custom header cell only for the particular column.

If you use both headerCellRender and headerCell, the Grid will render the specified custom header. To render the desired header, you can assign a Vue component, a render function, or a named slot to both properties.

Customization Approaches

To customize the headers of the Grid, apply any of the following approaches:

Using named slots
Using the render function

Using Named Slots

Use a named slot to fully control the content of a Grid header cell with standard Vue template syntax. The slot receives a props object that contains information about the current header cell, such as:

dataItem—The data item for the current row.
field—The field name of the current column.
class—The CSS class of the current header cell.

The following example demonstrates how to customize the Grid headers by using named slots.

Change Theme

Theme

Loading ...

Using the render Function

Use a render function to customize the content of Grid header cells programmatically. This approach is useful when you need reusable rendering logic or when generating header content dynamically.

The render function receives header cell properties that provide access to the current row data, column field, and Grid-generated styling information.

The following example demonstrates how to customize the Grid headers by using a render function. More details about the render function, you can find in this Vue documentation article.