Header Template
The native Vue Grid by Kendo UI 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 the
headerCell
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
The following example demonstrates how to customize the Grid headers by using named slots. For the complete example.
Using the render Function
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.