Reordering

You can enable column reordering for the Kendo UI Grid wrapper for Vue by using its reorderable property.

To enable the column reordering functionality in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To automatically display draggable and reorderable Kendo UI Data Grid wrapper for Vue columns, set reorderable to true.

<div id="vueapp" class="vue-app">
     <kendo-grid :data-source="localDataSource" :reorderable="true">
        <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
            }
        ]
    }
})

In this article