Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/handsontable/vue-handsontable-official

Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
https://github.com/handsontable/vue-handsontable-official

data-grid datatable dynamic-table excel grid grid-editor handsontable spreadsheet table vue vuejs

Last synced: 3 months ago
JSON representation

Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.

Lists

README 

        
# Important information



## We permanently moved this project to the main Handsontable repository at [https://github.com/handsontable/handsontable/tree/master/wrappers/vue](https://github.com/handsontable/handsontable/tree/master/wrappers/vue)



## It is still available under the same name in npm: [`@handsontable/vue`](https://www.npmjs.com/package/@handsontable/vue), so you don't have to update your dependency configuration.



---------









  

![Handsontable for Vue](https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-vue.png)



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.



[![npm](https://img.shields.io/npm/dt/@handsontable/vue.svg)](//npmjs.com/package/@handsontable/vue)

[![npm](https://img.shields.io/npm/dm/@handsontable/vue.svg)](//npmjs.com/package/@handsontable/vue)

[![Build status](https://travis-ci.org/handsontable/vue-handsontable-official.png?branch=master)](//travis-ci.org/handsontable/vue-handsontable-official)












A screenshot of a data grid for Vue.js










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



  



  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

    }

  }



```



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

      For all commercial purposes

    

    

      All features are available

      All features are available

    

    

      Community support

      Dedicated support

        

    

      Read the license

      See plans

    

  



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