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 Grid is part of Kendo UI for Vue, a professional grade UI library with 110+ 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

Change Theme

Theme

Loading ...

Setting Up Your Vue Project

Before you install the Kendo UI for Vue Native Grid, make sure that you have a running Vue project. The easiest way to set up a Vue project is to use the approach described in the Set up the Vue project section of the First Steps with JavaScript article.

Installing the Components

All Kendo UI for Vue packages are distributed through npm and offer a similar installation experience. To use the Grid, start with the installation of the npm package and its dependencies.

Navigate to the root folder of your Vue project and run the following command:

npm i @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-data-tools @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-animation @progress/kendo-vue-buttons @progress/kendo-vue-treeview @progress/kendo-vue-popup @progress/kendo-svg-icons @progress/kendo-theme-default @progress/kendo-licensing

Importing the Components

After installing the Grid package, import the component in the Vue App.

In the App component file of your Vue project (for example, src/App.vue), add the following code:

jsx

// ES2015 module syntax
import { Grid } from '@progress/kendo-vue-grid';

jsx

// CommonJS format
const { Grid } = require('@progress/kendo-vue-grid');

Using the Grid

After installing the listed above packages and importing the Grid component, add it to the template section of the App component file of your Vue project (for example, src/App.vue).
jsx
```
<Grid
    :style="{ height: '450px' }"
    :data-items="result"
    :columns="columns"
>
</Grid>
```

In the script section of the application, add definitions for the data items and the columns that the Grid will display:

jsx

export default {
    components: {
        Grid: Grid,
    },
    data: function () {
        return {
        dataItems: [.........],
        columns: [
            { field: 'ProductID' },
            { field: 'ProductName', title: 'Product Name' },
            { field: 'UnitPrice', title: 'Unit Price' },
        ],
    };
}

To style the Grid, install and import the Default theme, which is one of the four beautiful themes for Kendo UI for Vue.
1. Install the Default theme package.
  sh
```
npm install --save @progress/kendo-theme-default
```
2. Import the Theme package in src/App.vue.
  jsx
```
import '@progress/kendo-theme-default';
```
Build, run and test the application by typing the following command in the root folder of your project:
sh
```
npm run dev
```

Activating Your License Key

Using any of the UI components in the Kendo UI for Vue Native library requires either a commercial license key or an active trial license key.

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

Data operations
- Editing
- Filtering
- Grouping
- Paging
- Sorting
- Selection
Export options
- Excel export
- PDF export
Custom templates
More settings

Dependencies

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

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