127 lines
5.1 KiB
Markdown
127 lines
5.1 KiB
Markdown
|
<div align="center">
|
||
|
|
|
||
|
|
<a href="https://handsontable.com" rel="nofollow"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-logo-blue.svg" alt="Handsontable - data grid for Vue" width="300"></a>
|
||
|
|
|
||
|
|
# Data Grid for Vue <img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/vue-icon.svg" width="22" height="22">
|
||
|
|
|
||
|
|
Handsontable's wrapper for Vue combines data grid features with spreadsheet-like UX. <br>
|
||
|
|
It provides data binding, data validation, filtering, sorting, and CRUD operations.
|
||
|
|
|
||
|
|
[](https://npmjs.com/package/@handsontable/vue)
|
||
|
|
[](https://npmjs.com/package/@handsontable/vue)
|
||
|
|
[](https://github.com/handsontable/handsontable/actions/workflows/test.yml?query=branch%3Amaster)
|
||
|
|
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fhandsontable%2Fhandsontable?ref=badge_shield)
|
||
|
|
[](https://sonarcloud.io/dashboard?id=handsontable_handsontable)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
<a href="https://handsontable.com/demo"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-github-preview.png" alt="Handsontable data grid for Vue" width="805"/></a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
The most popular features of Handsontable for Vue:
|
||
|
|
|
||
|
|
✓ Multiple column sorting <br>
|
||
|
|
✓ Non-contiguous selection <br>
|
||
|
|
✓ Filtering data <br>
|
||
|
|
✓ Export to file <br>
|
||
|
|
✓ Validating data <br>
|
||
|
|
✓ Conditional formatting <br>
|
||
|
|
✓ Merging cells <br>
|
||
|
|
✓ Freezing rows/columns <br>
|
||
|
|
✓ Moving rows/columns <br>
|
||
|
|
✓ Resizing rows/columns <br>
|
||
|
|
✓ Hiding rows/columns <br>
|
||
|
|
✓ Context menu <br>
|
||
|
|
✓ Comments <br>
|
||
|
|
|
||
|
|
## 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)
|
||
|
|
|
||
|
|
<div id="installation"></div>
|
||
|
|
|
||
|
|
## 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
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script>
|
||
|
|
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
|
||
|
|
```
|
||
|
|
|
||
|
|
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
|
||
|
|
<template>
|
||
|
|
<hot-table :data="data" colHeaders="true" rowHeaders="true" width="600" height="300"></hot-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { HotTable } from '@handsontable/vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data: function() {
|
||
|
|
return {
|
||
|
|
data: [
|
||
|
|
['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
|
||
|
|
['2019', 10, 11, 12, 13],
|
||
|
|
['2020', 20, 11, 14, 13],
|
||
|
|
['2021', 30, 15, 12, 13]
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
HotTable
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### [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)</a> 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/).
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
Proudly created and maintained by the [Handsontable Team](https://handsontable.com/team).
|