# 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) [![Build status](https://app.codeship.com/projects/1ec34290-ed0a-0131-911c-1a47c8fbcce0/status?branch=master)](https://app.codeship.com/projects/26649) [![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) [![Known Vulnerabilities](https://snyk.io/test/github/handsontable/handsontable/badge.svg?targetFile=package.json)](https://snyk.io/test/github/handsontable/handsontable?targetFile=package.json) ---

## 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/frameworks-wrapper-for-vue-installation.html) - [API Reference](https://handsontable.com/docs/Core.html) - [Change log](https://handsontable.com/docs/tutorial-release-notes.html) - [Demo](https://handsontable.com/examples)

## Get Started ### Install with npm Run the following command in your terminal ``` npm install handsontable @handsontable/vue ``` You can load it directly from [jsDelivr](//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](//handsontable.com/docs/Options.html) can be set as `HotTable` props. **Styles** ```css @import '~handsontable/dist/handsontable.full.css'; ``` **Vue Component** ```vue ``` ### handsontable收缩行的操作图标从行头切换到某列中 ```vue ``` ### [View live demo](//handsontable.com/docs/frameworks-wrapper-for-vue-simple-example.html) ## 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/tutorial-license-key.html).

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