Multi-Column Headers

The Kendo UI Grid wrapper for Vue supports multi-column headers by specifying column groups which incorporate inner column structures.

To implement the multi-column headers functionality in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

The following example demonstrates how to nest columns in the Product Details column which are rendered through an array of column definitions. The Kendo UI Data Grid wrapper for Vue supports operations, such as sorting and filtering, on each column level and regardless of the selected multi-header pattern.

<div id="vueapp" class="vue-app">
     <kendo-grid :data-source="localDataSource"
                 :groupable="true"
                 :sortable="true"
                 :resizable="true"
                 :reorderable="true">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :title="'Product Details'" :columns="detailsColumnsDefinitions" ></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
new Vue({
    el: '#vueapp',
    data: {
        localDataSource: [{
                'ProductID':1,
                'ProductName':'Chai',
                'UnitPrice':18,
                'UnitsInStock':39,
                'Discontinued':false
            },
            {
                'ProductID':2,
                'ProductName':'Chang',
                'UnitPrice':19,
                'UnitsInStock':17,
                'Discontinued':false
            }
        ],
        detailsColumnsDefinitions: [
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" }
        ]
    }
})

In this article