This is the official wrapper of [**Handsontable**](//github.com/handsontable/handsontable) data grid for Vue.
It provides data binding, data validation, filtering, sorting and more.
[](//npmjs.com/package/@handsontable/vue)
[](//npmjs.com/package/@handsontable/vue)
[](//travis-ci.org/handsontable/vue-handsontable-official)
## Installation
Use npm to install this wrapper together with Handsontable.
```
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
```
##### [See the live demo](//handsontable.com/docs/frameworks-wrapper-for-vue-simple-example.html)
## Features
A list of some of the most popular features:
- Multiple column sorting
- Non-contiguous selection
- Filtering data
- Export to file
- Validating data
- Conditional formatting
- Merging cells
- Custom cell types
- Freezing rows/columns
- Moving rows/columns
- Resizing rows/columns
- Hiding rows/columns
- Context menu
- Comments
- Auto-fill option
## Documentation
- [Developer guides](//handsontable.com/docs/vue)
- [API Reference](//handsontable.com/docs/Core.html)
- [Release notes](//handsontable.com/docs/tutorial-release-notes.html)
- [Twitter](//twitter.com/handsontable) (News and updates)
## Support and contribution
We provide support for all users through [GitHub issues](//github.com/handsontable/vue-handsontable-official/issues). If you have a commercial license then you can add a new ticket through the [contact form](//handsontable.com/contact?category=technical_support).
If you would like to contribute to this project, make sure you first read the [guide for contributors](//github.com/handsontable/vue-handsontable-official/blob/master/CONTRIBUTING.md).
## Browser compatibility
Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance.
## License
This wrapper is released under [the MIT license](//github.com/handsontable/vue-handsontable-official/blob/master/LICENSE) but under the hood it uses [Handsontable](//github.com/handsontable/handsontable), which is dual-licensed. You can either use it for free in all your non-commercial projects or purchase a commercial license.
Free license
Paid license
For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating on development and testing servers.
## License key
**The license key is obligatory since [Handsontable 7.0.0](//github.com/handsontable/handsontable/releases/tag/7.0.0) (released in March 2019).**
If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase `'non-commercial-and-evaluation'`, as presented below.
You can pass it in the `settings` object:
```js
settings: {
data: data,
rowHeaders: true,
colHeaders: true,
licenseKey: 'non-commercial-and-evaluation'
}
```
Alternatively, you can pass it to a `licenseKey` prop:
```vue
```
If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at [handsontable.com](//handsontable.com/pricing).
The license key is validated in an offline mode. No connection is made to any server. [Learn more](//handsontable.com/docs/tutorial-license-key.html) about how it works.
Created by [Handsoncode](//handsoncode.net) with ❤ and ☕ in [Tricity](//en.wikipedia.org/wiki/Tricity,_Poland).
