The native Vue Grid by Kendo UI enables you to customize the rendering of its headers.
To implement a custom header:
- Use the
headerCellRenderprop that will customize all header cells.
- Set the
headerCelloption of the column to define a custom header cell only for the particular column.
If you use both
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.
To customize the headers of the Grid, apply any of the following approaches:
The following example demonstrates how to customize the Grid headers by using named slots. For the complete example.
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.