Columns Basics

The Kendo UI Grid wrapper for Vue supports options for configuring the behavior of its columns.

To configure the column behavior of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To manage the columns of the Grid:

For more information on the available properties, refer to the grid.columns configuration.

Using the kendo-grid-columns Component

The following example demonstrates how to set the inline initialization of the kendo-grid-columns component.

<div id="vueapp" class="vue-app">
     <kendo-grid :data-source="localDataSource">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></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
            }
        ]
    }
})

Using the data Vue Object

The following example demonstrates how to use the data object to specify the columns of the Kendo UI Data Grid wrapper for Vue.

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

In this article