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:

  1. Use the headerCellRender prop that will customize all header cells.
  2. 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 Vue Components

The native Vue Grid allows you to use both global and local component instance for customizing the headers in the Grid. The following example demonstrates how to customize the Grid header by using a global Vue component instance.

<div id="vueapp" class="vue-app">
        <grid
            :style="{height: '280px'}"
            :data-items="items"
            :columns="columns"
            @custom="customHandler">
      </grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

const componentInstance = Vue.component("template-component", {
    props: {
        field: String,
        title: String,
        sortable: [Boolean, Object],
    },
    template: `<span style='font-style: italic;'  @click="clickHandler"><b>{{title}}</b></span>`,
    methods: {
        clickHandler: function(e){
            this.$emit('custom', e);
        }
    }
});

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            cellTemplate: componentInstance,
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name', headerCell: componentInstance },
                { field: 'UnitPrice', title: 'Unit Price' }
            ],
            items: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18.0000,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 19.0000,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10.0000,
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton's Cajun Seasoning",
                "UnitPrice": 22.0000,
            }]
        };
    },
    methods: {
        customHandler: function(e){
            console.log('customHandler', e);
        }
    }
});

The same could also be achieved using the following local component instance:

const componentInstance = {
    props: {
        field: String,
        title: String,
        sortable: [Boolean, Object],
    },
    template: `<span style='font-style: italic;'  @click="clickHandler"><b>{{title}}</b></span>`,
    methods: {
        clickHandler: function(e){
            this.$emit('custom', e);
        }
    }
};

Using the render Function

The following example demonstrates how to customize the Grid headers by using a render function.

<div id="vueapp" class="vue-app">
        <grid
            :style="{height: '280px'}"
            :data-items="items"
            :columns="columns"
            @custom="customHandler">
      </grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price', headerCell: this.cellFunction }
            ],
            items: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18.0000,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 19.0000,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10.0000,
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton's Cajun Seasoning",
                "UnitPrice": 22.0000,
            }]
        };
    },
    methods: {
        customHandler: function(e){
            console.log('customHandler', e);
        },
        cellFunction: function (h, tdElement , props, listeners ) {
            return h('span',{
                on: {
                    click: function(e){
                        listeners.custom(e);
                    }
                }
            }, ['custom ' + props.title]);
        }
    }
});

Using Named Slots

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

<div id="vueapp" class="vue-app">
    <grid
        :style="{height: '280px'}"
        :data-items="items"
        :columns="columns"
        @custom="customHandler">
    <template v-slot:myTemplate="{props, listeners}" >
        <span style='font-style: italic;'><b>{{props.title}}</b></span>
    </template>
  </grid>
</div>
import Vue from 'vue';
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price', headerCell: 'myTemplate'  }
            ],
            items: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18.0000,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 19.0000,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10.0000,
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton's Cajun Seasoning",
                "UnitPrice": 22.0000,
            }]
        };
    },
    methods: {
        customHandler: function(e){
            console.log('customHandler', e);
        }
    }
});

In this article