# Data Grid for Vue

Handsontable's wrapper for Vue combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations. [![npm](https://img.shields.io/npm/dt/@handsontable/vue.svg)](https://npmjs.com/package/@handsontable/vue) [![npm](https://img.shields.io/npm/dm/@handsontable/vue.svg)](https://npmjs.com/package/@handsontable/vue) [![CI status](https://github.com/handsontable/handsontable/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/handsontable/handsontable/actions/workflows/test.yml?query=branch%3Amaster) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fhandsontable%2Fhandsontable.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fhandsontable%2Fhandsontable?ref=badge_shield) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=handsontable_handsontable&metric=alert_status)](https://sonarcloud.io/dashboard?id=handsontable_handsontable) ---

Handsontable data grid for Vue

## Features The most popular features of Handsontable for Vue:   ✓ Multiple column sorting
  ✓ Non-contiguous selection
  ✓ Filtering data
  ✓ Export to file
  ✓ Validating data
  ✓ Conditional formatting
  ✓ Merging cells
  ✓ Freezing rows/columns
  ✓ Moving rows/columns
  ✓ Resizing rows/columns
  ✓ Hiding rows/columns
  ✓ Context menu
  ✓ Comments
## Documentation - [Developer guides](https://handsontable.com/docs/vue-installation/) - [API Reference](https://handsontable.com/docs/api/core/) - [Changelog](https://handsontable.com/docs/release-notes/) - [Demo](https://handsontable.com/demo)

## Get Started ### Install with npm Run the following command in your terminal ``` npm install handsontable @handsontable/vue ``` You can load it directly from [jsDelivr](https:jsdelivr.com/package/npm/@handsontable/vue) as well. ```html ``` The component will be available as `Handsontable.vue.HotTable`. ### Usage Use this data grid as you would any other component in your application. [Options](https://handsontable.com/docs/api/options/) can be set as `HotTable` props. **Styles** ```css @import '~handsontable/dist/handsontable.full.css'; ``` **Vue Component** ```vue ``` ### [View live demo](https://handsontable.com/docs/vue-simple-example/) ## Support We provide support for developers working with commercial version via [contact form](https://handsontable.com/contact?category=technical_support) or at support@handsontable.com. If you use a non-commercial version then please ask your tagged question on [StackOverflow](https://stackoverflow.com/questions/tagged/handsontable). ## License Handsontable is a commercial software with two licenses available: - Free for non-commercial purposes such as teaching, academic research, and evaluation. [Read it here](https://github.com/handsontable/handsontable/blob/master/handsontable-non-commercial-license.pdf). - Commercial license with support and maintenance included. See [pricing plans](https://handsontable.com/pricing). ## License key If you use Handsontable for Vue in a project that supports your commercial activity, then you must purchase the license key at [handsontable.com](https://handsontable.com/pricing). If you use the free for non-commercial license of Handsontable, then pass the phrase `'non-commercial-and-evaluation'`, as described in [this documentation](https://handsontable.com/docs/license-key/).

Proudly created and maintained by the [Handsontable Team](https://handsontable.com/team).