# Vue Grid Overview

The Kendo UI for Vue 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 Vue component that integrates with the Vue framework and supports extensive customization through column configuration, templates, events, and styling.

<CtaPanelOverview></CtaPanelOverview>

## Vue Grid Demo

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/basic/source.txt)

## Setting Up Your Vue Project

Before you install the Kendo UI for Vue 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](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api#1-set-up-the-vue-project) section of the [First Steps with JavaScript](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api) 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](https://www.telerik.com/kendo-vue-ui-develop/components/grid#dependencies).

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

```sh
 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-meridian
```

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

1. 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>
   ```

2. 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' },
               ],
           };
       };
   }
   ```

3. To style the Grid, install and import the [Meridian theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/), which is one of the [five beautiful themes](https://www.telerik.com/kendo-vue-ui-develop/components/styling) for Kendo UI for Vue.

   1. Install the Meridian theme package.

      ```sh
      npm install --save @progress/kendo-theme-meridian
      ```

   2. Import the Theme package in `src/App.vue`.

      ```jsx
      import '@progress/kendo-theme-meridian';
      ```

4. 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 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](https://www.telerik.com/kendo-vue-ui-develop/components/my-license) 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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/live-data) and [persist Grid state](https://www.telerik.com/kendo-vue-ui-develop/components/grid/persist-state) between sessions. [Read more about Grid data binding...](https://www.telerik.com/kendo-vue-ui-develop/components/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...](https://www.telerik.com/kendo-vue-ui-develop/components/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...](https://www.telerik.com/kendo-vue-ui-develop/components/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...](https://www.telerik.com/kendo-vue-ui-develop/components/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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/filtering/global-filtering). [Read more about Grid filtering...](https://www.telerik.com/kendo-vue-ui-develop/components/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...](https://www.telerik.com/kendo-vue-ui-develop/components/grid/grouping)

### Export to PDF, Excel, and CSV

Export Grid data to [Excel](https://www.telerik.com/kendo-vue-ui-develop/components/grid/excel-export), [CSV](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export), or [PDF](https://www.telerik.com/kendo-vue-ui-develop/components/grid/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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/print-grid).

### Rows Options

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

* [Row selection](https://www.telerik.com/kendo-vue-ui-develop/components/grid/selection)—Supports single, multiple, and range selection of rows and cells.
* [Sticky rows](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows)—Keeps rows visible while users scroll the Grid.
* [Detail rows](https://www.telerik.com/kendo-vue-ui-develop/components/grid/custom-rendering/detail)—Displays supplementary information for a data item.
* [Row reordering](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows/row-reorder)—Changes row order through drag and drop.
* [Row spanning](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows/row-span)—Spans cell content across multiple rows.
* [Row pinning](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows/row-pinning)—Pins rows to the top or bottom of the Grid.
* [Context menu](https://www.telerik.com/kendo-vue-ui-develop/components/grid/interactivity/context-menu), [loading indicator](https://www.telerik.com/kendo-vue-ui-develop/components/grid/interactivity/loading-indicator), and [clipboard operations](https://www.telerik.com/kendo-vue-ui-develop/components/grid/interactivity/clipboard)—Support common Grid workflows.

### Columns Options

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

* [Hidden columns](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/hidden)—Show or hide columns.
* [Spanned columns](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/spanned)—Span cell content across multiple columns.
* [Multi-column headers](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/headers)—Group columns under a common header.
* [Column menus](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/column-menu)—Provide access to column actions such as filtering, sorting, grouping, and visibility.
* [Locked columns](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/locked)—Keep columns visible while users scroll horizontally.
* [Column reordering](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/reordering) and [column resizing](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/resizing)—Let users arrange columns and adjust their width.
* [Dynamic columns](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/dynamic-column-generation) and [column widths](https://www.telerik.com/kendo-vue-ui-develop/components/grid/columns/width)—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...](https://www.telerik.com/kendo-vue-ui-develop/components/grid/scroll-modes) Review [Grid performance optimization](https://www.telerik.com/kendo-vue-ui-develop/components/grid/performance) for additional guidance.

### Sizing and Styling

Set a [compact Grid size](https://www.telerik.com/kendo-vue-ui-develop/components/grid/compact-grid), customize the [Grid styling](https://www.telerik.com/kendo-vue-ui-develop/components/grid/styling/basics), and adapt the layout to different screen sizes with [responsive design](https://www.telerik.com/kendo-vue-ui-develop/components/grid/styling/responsive-design).

### Custom Rendering

Customize cell, header, footer, and group-header content with Vue components or named slots. Use detail-row and master-detail templates to display additional or hierarchical content. [Read more about Grid custom rendering...](https://www.telerik.com/kendo-vue-ui-develop/components/grid/custom-rendering/custom-cells)

### Globalization

The Grid supports [globalization](https://www.telerik.com/kendo-vue-ui-develop/components/grid/globalization) by localizing built-in messages and formatting dates, numbers, and currencies for different cultures.

### Accessibility

The Grid provides [WAI-ARIA accessibility support](https://www.telerik.com/kendo-vue-ui-develop/components/grid/accessibility/wai-aria-support), WCAG 2.2 AA and Section 508 guidance, focus management, and screen-reader support for accessible interactions. [Read more about Grid accessibility...](https://www.telerik.com/kendo-vue-ui-develop/components/grid/accessibility/wai-aria-support)

### Keyboard Navigation

The Grid provides keyboard navigation for moving through cells, sorting columns, expanding or collapsing groups, and entering or exiting editors and filter controls. [Read more about Grid keyboard navigation...](https://www.telerik.com/kendo-vue-ui-develop/components/grid/keyboard-navigation)

## Dependencies

The Grid package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* 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 components support Vue 3.

## Support and Learning Resources

* [Grid Homepage](https://www.telerik.com/kendo-vue-ui/grid)
* [API Reference of the Grid Component](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [Grid Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=grid)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)
* [Multifunctional Grid Example with Grouping, Detail Template, Localization, etc.](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-grouping-detail-template-localization-sortable-reorderable)