Grid Overview

The native Vue Grid by Kendo UI displays data in a tabular format.

It supports the implementation of data operations and can be bound to local or remote data. As a native Vue component, it takes full advantage of the Vue framework.

Native vs Wrapper Grid Component

The native and wrapper Grid components for Vue by Kendo UI differ in the following ways:

  • The native Grid is not jQuery-dependent.
  • The native Grid is not Kendo UI DataSource-dependent for wrapping its data items in Kendo UI observables objects. This guarantees better performance in terms of Vue reactivity.
  • The native Grid supports native templates) and can render the following template types:
    • Slots
    • Render Functions
    • Vue Components

Basic Usage

The following example demonstrates how to initialize the Grid.

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

Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            items: [],
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
    methods: {
        createRandomData(count) {
            const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
            const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]

            return Array(count).fill({}).map((_, idx) => ({
                ProductID: idx + 1,
                ProductName: productNames[Math.floor(Math.random() * productNames.length)],
                UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
    mounted() {
        this.items = this.createRandomData(50);


To initialize the Grid, either:

Using CDN

You need to reference the animation, popup, intl and grid package, in order to be able to use the Kendo Native Grid for Vue. If you need data manipulation you can add the data-query package reference it in the code by using KendoDataQuery object - for example KendoDataQuery.orderBy().

<script src=""></script>
 <script src=""></script>  
 <script src=""></script>
 <script src=""></script>
 <script src=""></script>

Initializing with Webpack

  1. Add a Kendo UI theme.

    npm install --save @progress/kendo-theme-default
  2. Install the Grid Native package for Vue.

    npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-animation @progress/kendo-vue-intl @progress/kendo-vue-popup vue-class-component
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI - related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI - related files the component where they will be referred.

    import '@progress/kendo-theme-default/dist/all.css'
    import { Grid } from '@progress/kendo-vue-grid'
    Vue.component('Grid', Grid);
    new Vue({
       el: '#app' //id of the container

Functionality and Features


The Grids package requires you to install the following peer dependencies in your application:

  • vue 2.6.11*
  • vue-class-component 7.2.2*
  • @progress/kendo-vue-intl
  • @progress/kendo-data-query
  • @progress/kendo-vue-animation
  • @progress/kendo-vue-popup

In this article