Kendo UI for Vue Native Grid Overview

Updated on Aug 14, 2026

The Kendo UI for Vue Native Data Grid provides ready-to-use features for displaying, editing, and analyzing local or remote data. It supports paging, sorting, filtering, grouping, virtualization, exporting, and accessible keyboard navigation.

The Grid is a native Vue component that integrates with the Vue framework and supports extensive customization through column configuration, templates, events, and styling.

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

Loading ...

Setting Up Your Vue Project

Before you install the Kendo UI for Vue Native Data 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, install the Grid package and its peer dependencies.

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

 npm i @progress/kendo-vue-grid @progress/kendo-csv @progress/kendo-data-query @progress/kendo-drawing @progress/kendo-file-saver @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-buttons @progress/kendo-vue-common @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-indicators @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-layout @progress/kendo-vue-popup @progress/kendo-svg-icons @progress/kendo-theme-default

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 packages listed above 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="dataItems"
    :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 five 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 UI component 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

The Kendo UI for Vue Data Grid provides a set of features for displaying, editing, and analyzing tabular data.

Data Binding

The Grid supports local and remote data binding with built-in data processing or controlled state management for operations such as paging, sorting, filtering, and grouping. You can also update rows from live data and persist Grid state between sessions. Read more about Grid data binding...

Editing

The Grid enables you to create, update, and delete records with inline or in-cell editing. Configure custom editors for specific column data types and validate changes before saving them. Read more about Grid editing...

Paging

The Grid enables you to split data into pages with built-in, controlled client-side, or server-side paging. Configure numeric, input, custom, and responsive pager types to match your application workflow. Read more about Grid paging...

Sorting

The Grid supports single-column and multiple-column sorting, unsorting, initial sort descriptors, and custom comparison logic. You can process sorting on the client or server. Read more about Grid sorting...

Filtering

The Grid provides filtering options for displaying only records that match specified criteria. Use a filter row or column menu with built-in text, numeric, date, and Boolean filter controls, or provide custom filter cells. For filtering across multiple fields, use a global filter. Read more about Grid filtering...

Grouping

The Grid supports built-in and controlled grouping. Configure initial groups, groupable columns, group headers, aggregate values, and expand or collapse behavior. Read more about Grid grouping...

Export to PDF, Excel, and CSV

Export Grid data to Excel, CSV, or PDF. Customize the exported columns and data, and export all pages or only the current page. You can also prepare scrollable or pageable data for browser printing.

Rows Options

The Grid provides row options for selection, layout, and common interactions:

Row selection—Supports single, multiple, and range selection of rows and cells.
Sticky rows—Keeps rows visible while users scroll the Grid.
Detail rows—Displays supplementary information for a data item.
Row reordering—Changes row order through drag and drop.
Row spanning—Spans cell content across multiple rows.
Row pinning—Pins rows to the top or bottom of the Grid.
Context menu, loading indicator, and clipboard operations—Support common Grid workflows.

Columns Options

The Grid provides column options for layout, visibility, and data interaction:

Hidden columns—Show or hide columns.
Spanned columns—Span cell content across multiple columns.
Multi-column headers—Group columns under a common header.
Column menus—Provide access to column actions such as filtering, sorting, grouping, and visibility.
Locked columns—Keep columns visible while users scroll horizontally.
Column reordering and column resizing—Let users arrange columns and adjust their width.
Dynamic columns and column widths—Generate columns at runtime and control their width.

Virtualization

The Grid supports virtual scrolling and column virtualization for large or wide datasets. Virtual scrolling renders the visible portion of the data and can be combined with grouping. Read more about Grid scroll modes and virtualization... Review Grid performance optimization for additional guidance.

vue 3.0.2 or later
@progress/kendo-csv
@progress/kendo-data-query
@progress/kendo-drawing
@progress/kendo-file-saver
@progress/kendo-licensing
@progress/kendo-vue-animation
@progress/kendo-vue-buttons
@progress/kendo-vue-common
@progress/kendo-vue-data-tools
@progress/kendo-vue-dateinputs
@progress/kendo-vue-dropdowns
@progress/kendo-vue-indicators
@progress/kendo-vue-inputs
@progress/kendo-vue-intl
@progress/kendo-vue-layout
@progress/kendo-vue-popup
@progress/kendo-svg-icons

Kendo UI for Vue Native components support Vue 3.

Kendo UI for Vue Native Grid Overview

Kendo UI for Vue Native Grid Demo

Setting Up Your Vue Project

Installing the Components

Importing the Components

Using the Grid

Activating Your License Key

Functionality and Features

Data Binding

Editing

Paging

Sorting

Filtering

Grouping

Export to PDF, Excel, and CSV

Rows Options

Columns Options

Virtualization

Sizing and Styling

Custom Rendering

Globalization

Accessibility

Keyboard Navigation

Dependencies

Support and Learning Resources

Additional Resources