Grid Overview

The Kendo Native Data Grid (Table) for Vue provides 100+ ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, export to PDF and Excel and accessibility.

The Kendo Grid for Vue is built on Vue from the ground up, with zero dependencies, by a company with 10+ years of experience in making enterprise-ready Grids. This results in a Vue data grid that delivers lightning fast performance and is highly customizable.

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 Grid for Vue Demo Preview

Example
View Source
Edit In Stackblitz  
Change Theme:

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

Installation

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="https://unpkg.com/@progress/kendo-data-query@1.5.2/dist/cdn/js/kendo-data-query.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-animation@latest/dist/cdn/js/kendo-vue-animation.js"></script>  
  <script src="https://unpkg.com/@progress/kendo-vue-data-tools@latest/dist/cdn/js/kendo-vue-data-tools.js"></script>  
  <script src="https://unpkg.com/@progress/kendo-vue-popup@latest/dist/cdn/js/kendo-vue-popup.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js"></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-data-tools @progress/kendo-vue-intl @progress/kendo-vue-popup
  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

Dependencies

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

  • vue 2.6.11 and 3.0.0
  • @progress/kendo-vue-intl
  • @progress/kendo-data-query
  • @progress/kendo-vue-animation
  • @progress/kendo-vue-popup