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:

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
  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

In this article