Header Template

Updated on Aug 14, 2026

The Kendo UI for Vue Native Grid enables you to customize the rendering of its header cells with the cells prop.

To implement a custom header cell:

1. Set cells on the Grid to customize header cells in all columns.
2. Set cells on a column to customize the header cell in that column.

Set headerCell in cells to a named slot or a Vue component. For the available header-cell properties, see the GridCustomHeaderCellProps API.

The following example uses a named slot to customize the header cell in the UnitPrice column.

Loading ...

For applications on earlier Grid versions that still use headerCell or headerCellRender, see Use Legacy Grid Templates.

Suggested Links

• Edit Grid's Header on Double Click
• API Reference of the Grid
• API Index of the Grid