Components / Grid / Overview / 

Kendo UI for Vue Native Data Grid Overview

The Kendo UI for Vue Native Data Grid (Table) 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 UI for Vue Grid 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 offers extensive customization.

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

The Data Management Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free Trial

Kendo UI for Vue Native Grid Demo

Example
View Source
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 improved performance with 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

To use the Kendo UI for Vue Native Grid with CDN, follow the below steps:

  1. Reference the animation, popup, intl and grid packages. 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>
  1. Reference one of the Kendo UI themes to style your components.
    // Load the Kendo Default Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css">

    // Load the Kendo Bootstrap Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    // To load the Kendo Material Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">

    // To load the Kendo Fluent Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent@latest/dist/all.css">
  1. Follow the instructions in this article to activate your product license. You can skip this step if your application already contains a license key.

Initializing with Webpack

  1. Add a Kendo UI theme.

    npm install --save @progress/kendo-theme-default @progress/kendo-licensing

  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 @progress/kendo-vue-inputs @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-indicators

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

  4. Follow the instructions on the Kendo UI for Vue My License page to activate your license. You can skip this step if your application already contains a Kendo UI license file.

Functionality and Features

Dependencies

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

  • vue 2.6.11* or 3.0.0*
  • @progress/kendo-data-query
  • @progress/kendo-licensing
  • @progress/kendo-vue-animation
  • @progress/kendo-vue-data-tools
  • @progress/kendo-vue-dateinputs
  • @progress/kendo-vue-dropdowns
  • @progress/kendo-vue-inputs
  • @progress/kendo-vue-indicators
  • @progress/kendo-vue-intl
  • @progress/kendo-vue-popup

Vue 2 is currently in its end-of-support phase till Nov 2024. After our last major release for 2024, Vue 2 will no longer be supported in the new versions of the Kendo UI for Vue components. Please check our Vue 2 End of Support article for more details.

Support and Learning Resources

Additional Resources

Previous
Ticks
Next
Overview

In this article

Not finding the help you need?

Contact Support