Nothing Prevents Misery

    This package has been deprecated

    Author message:

    Handsontable Pro for Vue is now available as @handsontable/vue

    TypeScript icon, indicating that this package has built-in type declarations

    3.1.1 • Public • Published

    ⚠️ This package is deprecated.

    Handsontable Pro for Vue is now available as @handsontable/vue.

    Handsontable Pro for Vue

    Handsontable Pro for Vue is the official wrapper for Handsontable Pro, a commercial data grid component with a spreadsheet look & feel. It easily integrates with any data source and comes with lots of useful features like data binding, validation, sorting or powerful context menu.

    Build status

    Table of contents

    1. Installation
    2. Getting Started
    3. Documentation
    4. What to use it for?
    5. Features
    6. Screenshot
    7. Resources
    8. License Key
    9. Support
    10. Contributing
    11. License and Pricing


    Use npm to download the project.

    npm install handsontable-pro @handsontable-pro/vue

    Getting Started

    Assuming that you have installed the wrapper with npm, now you just need to include Handsontable styles into your build system and use <HotTable> just like any other Vue component.

    Vue Component

      <hot-table :settings="settings"></hot-table>
      import { HotTable } from '@handsontable-pro/vue';
      export default {
        data: function() {
          return {
            settings: {
              data: [
                ["", "Ford", "Volvo", "Toyota", "Honda"],
                ["2016", 10, 11, 12, 13],
                ["2017", 20, 11, 14, 13],
                ["2018", 30, 15, 12, 13]
              colHeaders: true,
              rowHeaders: true,
        components: {
    <style src="../node_modules/handsontable-pro/dist/handsontable.full.css"></style>


    Visit to get more Handsontable for Vue examples and guides.

    What to use it for?

    The list below gives a rough idea on what you can do with Handsontable Pro, but it shouldn't limit you in any way:

    • Database editing
    • Configuration controlling
    • Data merging
    • Team scheduling
    • Sales reporting
    • Financial analysis


    Some of the most popular features include:

    • Filtering data (Pro)
    • Nested headers (Pro)
    • Export to file (Pro)
    • Column summary (Pro)
    • Sorting data
    • Data validation
    • Conditional formatting
    • Context menu
    • Adding comments to cells
    • Dragging fill handle to populate data
    • Internationalization
    • Non-contiguous selection



    License Key

    After you buy the license for Handsontable Pro, you should receive a license key of your copy of the software. It will be available in your account at

    Paste your license key to the configuration section, just like in the example below.

    const settings = {
      data: data,
      rowHeaders: true,
      colHeaders: true,
      licenseKey: '00000-00000-00000-00000-00000'

    Note that the license key is passed as a string so you need to wrap it in quotes ('').


    If you have a valid license of Handsontable Pro then your primary contact is through support team at

    You can also report your issues here on GitHub.


    If you would like to help us to develop this wrapper for Vue, please read the guide for contributors first.

    License and Pricing

    This wrapper is released under the MIT license but under the hood it uses Handsontable Pro, which is a commercial and paid software. You need to purchase a license in order to use it in production environment.

    Copyrights belong to Handsoncode sp. z o.o.


    npm i @handsontable-pro/vue

    DownloadsWeekly Downloads






    Unpacked Size

    59 kB

    Total Files


    Last publish


    • kspilka
    • budnix
    • jansiegel
    • wszymanski