# Header Template

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

To implement a custom header cell:

1. Set [`cells`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#cells) on the Grid to customize header cells in all columns.
2. Set [`cells`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcustomheadercellprops).

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/custom-rendering/headers/slot/source.txt)

> For applications on earlier Grid versions that still use `headerCell` or `headerCellRender`, see [Use Legacy Grid Templates](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-legacy-header-footer-filter-templates).

## Suggested Links

* [Edit Grid's Header on Double Click](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-edit-column-headers-on-double-click)
* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)