Thanks for the development team for develop the handy component, but I encountered some problem in my vue-cli project when installing vue-handsontable-official:

The first is about installing handsontable-official that it reply "peerDependencies WARNING vue-handsontable-official@^1.1.0 requires a peer of handsontable@^0.35.1 but [email protected] was installed!".

But handsontable now is handsontable@^0.36.

And then I try to install for "npm install handsontable" and "npm install vue-handsontable-official", it replay me another 2 wranings:

1."Couldn't find preset "es2015" relative to directory "C:\Users\shaohong\Desktop\vue\smart-ui\node_modules\_vue-handsontable-official@1.1.0@vue-handsontable-official"'
2."Failed to find '~handsontable/dist/handsontable.full.css'"

Is there any problem with my method? In what order can I install handsontable-official? I really need to use such a convenient component!

I upgraded to 2.0.0-beta1

$ yarn add https://github.com/handsontable/vue-handsontable-official#2.0.0-beta1
yarn add v1.5.1
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
[5/5] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]

$ yarn list vue-handsontable-official
yarn list v1.5.1
└─ [email protected]
✨  Done in 1.60s.

yarn or npm will complain dependency not found:

$ yarn run dev
yarn run v1.5.1
$ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 10% building modules 2/2 modules 0 active(node:80512) DeprecationWarning: Tapable.plugin is deprecated. Use new API
 on `.hooks` instead
 95% emitting CopyPlugin

 DONE  Compiled successfully in 17925ms                                                                  12:16:56 PM

 I  Your application is running here: http://localhost:8080
^C
Hanxue-MBP:jinrong hanxue$ yarn run dev
yarn run v1.5.1
$ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 10% building modules 2/2 modules 0 active(node:80771) DeprecationWarning: Tapable.plugin is deprecated. Use new API
 on `.hooks` instead
 94% after seal

 ERROR  Failed to compile with 1 errors                                                                  12:22:03 PM

This dependency was not found:

* vue-handsontable-official in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server vue vu
e-material vue-router vuetable-2 vuelidate handsontable chart.js vue-chartjs accounting semantic-ui-css vue-handsont
able-official

To install it, you can run: npm install --save vue-handsontable-official

Using version 1.1.0 will not cause the problem.

My package.json:

  "dependencies": {
"vue-handsontable-official": "https://github.com/handsontable/vue-handsontable-official#2.0.0-beta1",

I'm sorry to bother you again. I just started this plug-in. I have encountered many problems when using it recently, but the Vue-handsontable document is too simple to understand.This time I want to set the width of the table, and if the content of the table exceeds the width of the current screen let the table overflow:auto;But the parent box is overflow:hidden.I hope so, but now setting the width doesn't work and the table is scrolling with the entire page!Eager to find a solution.Thank you very much!

Hello, I have a question,how to use Methods of handsontable in Vue?
For example：

hot = Handsontable(document.getElementById('example1'), {
    data: data,
    minRows: 5,
    minCols: 6,
    currentRowClassName: 'currentRow',
    currentColClassName: 'currentCol',
    rowHeaders: true,
    colHeaders: true,
    selectCell:selectCell1
  });
  hot.selectCell(1,2,3,4);

How do I use hot.selectCell in the vue.
thx!

when editing a cell after change event is called twice and validation is overrided.
So kindly please help anyone from the community.

When using VUE version, it is not possible to use the normal version of the function, may I ask when the framework version of the document will be issued？
Now I need to merge the cells of the header, but the vue version does not work.please hellp me

Hello,

I've followed the basic usage example and this project doesn't seem to work at all for me. Although, I've installed all required dependencies I still get the following error:

Uncaught Error: Cannot find module 'numbro'                      handsontable.js?732b:53

What am I missing? :)

hi,
i have a problem by handsontable,how can i use handsontable-pro version in vue-project.
now in my project,i use vue-handsontable-official.but it is Handsontable CE version.i want all function like handsontable-pro.of course,i can buy pro-version,but i want to use in vue-project.thanks.

when I update [email protected], the webpack throw the error, Could author build the source code of vue-handsontable-official before publish the npm package ?

Hi,

is there anything I'm missing when using a numeric format for cells? (as described here: https://docs.handsontable.com/0.35.1/demo-numeric.html)

Should I also include https://docs.handsontable.com/0.35.1/bower_components/numbro/dist/languages.min.js?

Hi,
I followed the instructions described here : https://github.com/handsontable/vue-handsontable-official/wiki/Installation-guide; using official Vue.js project template and installed properly HandsonTable pro using npm.

I am getting the following error:

* -!../../css-loader/index.js?{"minimize":false,"sourceMap":false}!handsontable/dist/handsontable.full.css in ./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-0e50d93a","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./node_modules/vue-handsontable-official/src/HotTable.vue

What piece of information is missing?

Best Regards,

Error when importing the hottable:

import HotTable from 'vue-handsontable-official';

will result the following error:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/shenxinxu/projects/vs-vue2/node_modules/vue-handsontable-official"

How to fix it?

Vue2 / Typescript project:

  import Vue from 'vue'
  import { Component, Prop, Watch } from 'vue-property-decorator'
  import HotTable from 'vue-handsontable-official'

error: TS2307: Cannot find module 'vue-handsontable-official'.

Relevant dependencies:

"vue": "^2.5.3",
"vue-handsontable-official": "^1.0.0",
"typescript": "^2.6.1",
"webpack": "^3.8.1",

when i remove a row and afterRemoveRow event is fired, there is no influence on data, but the display of hansontable is changed.

I can't install hansonTable for now even with the installation guide.

So I have few question :

• Shouldn't vue be loaded first ?
• Why there is no Vue.use command ?

Maybe like this :

import Vue from 'vue';
import HotTable from '@handsontable/vue';
Vue.use(HotTable);

I use webpack2.
Error is Cannot find module 'pikaday'

Could someone please explain or show how to use this example https://docs.handsontable.com/0.34.5/tutorial-load-and-save.html with Vue?

I'm using Laravel 5.5 with Vue and trying to load and update data with ajax. Basic example with static data https://github.com/handsontable/vue-handsontable-official/wiki/Installation-guide works fine for me.

Any help appreciated.

Thanks.

Here's my code:

<template>
  <div id="view-panel">
    <h1>View Panel</h1>
    <HotTable :root="root" :settings="hotSettings"/>
  </div>
</template>

<script>
import HotTable from 'vue-handsontable-official'

export default {
  name: 'Results',
  components: { HotTable },
  props: ['resourceList'],
  data () {
    return {
      root: 'test-hot',
      hotSettings: {
        data: this.resourceList,
        colHeaders: true
      }
    }
  }
}
</script>

<style>
#test-hot {
  width: 600px;
  height: 400px;
  overflow: hidden;
}
</style>

Here's my package.json:

{
  "name": "sample_frontend",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "apollo-client": "^1.9.0-1",
    "graphql-tag": "^2.4.2",
    "vue": "^2.3.3",
    "vue-apollo": "^2.1.0-beta.20",
    "vue-handsontable-official": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Here's my webpack config (generated by vue-cli):

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './static/js'),
    publicPath: '/static/js/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

When I build my project, I get the following error:

ERROR in build.js from UglifyJs
Unexpected token: name (SettingsMapper) [./~/vue-handsontable-official/src/settingsMapper.js:3,0][build.js:68783,6]

What am I missing?

Hi,
I would like to use afterChange event

template:
<HotTable root="hotgrid" :settings="hotSettings" @afterChange="saveChanges"></HotTable>
script:

export default {
	data: function() {
		return {
			hotSettings: {
				rowHeaders: true,
				columnSorting: true,
				dropdownMenu: true,
				data: [['11','22','33'],['121','232','432']],
				colHeaders: ['A','B','C'],
			}
		}
	},
       methods: {
               saveChanges: function(change, source) {
			console.log(change)
			console.log(source)
       }
}

Thanks!

Hi,

If I want to use getData() method of Handsontable from this component, how can I use it?

Template

<no-ssr placeholder="loading...">
     <hot-table :root="root" :settings="hotSettings"></hot-table>
</no-ssr>

Script

export default {
    components: {
      'no-ssr': NoSSR
    },
    data () {
      return {
        root: 'test-hot',
        hotSettings: {
          data: [['a', 'ab'], ['cd', 'eg']],
          colHeaders: true
        },        
      }
    },   
  }

Note: I'm using Nuxt.js and register HotTable as Vue component inside a plugin

Currently, I am trying to create a custom render cell where the user will be able to upload some files. But I am facing the problem to render an upload component inside each cell of the column.

Does anyone have an idea of how to achieve this??

Thank you so much

Hi @wszymanski
How to do that?

I'm using Handsontable Vue integration, and I'd like to use a custom renderer.
In your examples, you have:

function imageRenderer (instance, td, row, col, prop, value, cellProperties) {
    var escaped = Handsontable.helper.stringify(value),
      img;

    if (escaped.indexOf('http') === 0) {
      img = document.createElement('IMG');
      img.src = value;

      Handsontable.Dom.addEvent(img, 'mousedown', function (e){
        e.preventDefault(); // prevent selection quirk
      });

      Handsontable.Dom.empty(td);
      td.appendChild(img);
    }
    else {
      // render as text
      Handsontable.renderers.TextRenderer.apply(this, arguments);
    }

    return td;
  }

However Handsontable.Dom is undefined and the addEvent function fails.
Did you ever run in an issue like this ?

@handsontable
I am trying to use the undo method but I dont know how to make it work in vue handsontable.
I have seen the demo like this one http://jsfiddle.net/s6t768pq/609/ where by default comes enabled.

I try on vue to enable by default, but i can not make it work. Anyone have been able to make it work?

<HotTable ref="testHot"
                :root="root" 
                :settings="hotSettings"
                :columns="columns"
                :data="dataTable"
                :colHeaders="columnHeaders"
                :readOnly="readOnly"
                :rowHeaders="true"
                :contextMenu="true"
                :manualColumnMove="true"
                :manualRowMove="true"
                :dropdownMenu="true"		
                :mergeCells="true"
                :columnSorting="true"
                :manualColumnResize="true"
                :manualRowResize="true"
                :formulas="true"
                :undo ="true"
                :onAfterCreateRow="afterCreateRowHandler"
                :onAfterChange="afterChangeHandler"
                :filters="true"
            ></HotTable>

PS. If I check the component I have undo=true , but isUndoAvailable() = false, do I have to enable the plugin?

Creating an alias seems to screw up handsontable-pro finding the plugins provided in handsontable:

* handsontable/3rdparty/walkontable/src in ./node_modules/handsontable-pro/commonjs/plugins/nestedHeaders/nestedHeaders.js, ./node_modules/handsontable-pro/commonjs/plugins/nestedRows/nestedRows.js
* handsontable/3rdparty/walkontable/src/overlay/_base in ./node_modules/handsontable-pro/commonjs/3rdparty/walkontable/src/overlay/bottom.js, ./node_modules/handsontable-pro/commonjs/3rdparty/walkontable/src/overlay/bottomLeftCorner.js

Really should have handsontable-pro be a complete drop in replacement for handsontable.

i just setted
self.hotSettings = {
data: self.dataSource // and there is just 1 col 1 row1
}
when i double click to edit the cell ,the handsontableInput>textarea is too wider than the table...
so , how can i set some style or settings can fix this
thx very much for helping~~

There should be instructions on how to make this work with webpack. The following worked for me:

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.join(projectRoot, 'node_modules', 'vue-handsontable-official')
      },
      ...
   ]
}

Hi there~
I have a problem that how to registry the custom renderer with HotTable?
If use HandsonTable.js can use following to deal with
Handsontable.renderers.registerRenderer('asterix', asterixDecoratorRenderer);

Is there any way to handle custom renderer?

在2.9.3脚手架下，通过 npm install vue-handsontable-official 安装的1.0.0 版本打包编译时，报错

in ./node_modules/_vue-handsontable-official@1.0.0@vue-handsontable-official/src/HotTable.vue
Module build failed: Error: Failed to find '~handsontable/dist/handsontable.full.css'

可能因为打包配置问题，这个问题我可以通过什么办法修改打包配置解决呢？是不是vue-cli某个依赖模块版本出了问题；

Hi,

I am new to vue-handsontable-official, and now would like to get the simialr result as below link shows:
https://jsfiddle.net/59dz92jh/55/

The above is using the handsontable directly, NOT the vue-handsontable approach, how should I do in vue-handsontable-official context?

Thanks for kind help!

I use

• "handsontable-pro":"^1.15.1",
• "vue-handsontable-official": "^1.1.0",
• Chrome 61 on Windows

If i have wrapped text in the cells and fixed columns i get a missalignmend in the rows at the point between fixed and rest columns.

The problem is described in the following issue:
handsontable/handsontable#3239

But the fix does not work for me with vue-handsontable-official.

It can be reproduced with the vue-handsontable-official demo.
https://github.com/handsontable/vue-handsontable-official/tree/master/demo

Change the demo in the folliwing way:

Push more content into the cells.
row.push('[' + i + ', ' + j + ']' + 'sadadadadadadadadasdasdsd asdasd aasd asd asd sad');

Set fixed width to the columns so the text wrapps:
colWidths: [80, 100, 150, 80, 200, 200, 250, 100, 150, 250, 200, 400, 60, 130, 300, 300, 200, 300],

Fix the columns:
fixedColumnsLeft: 3,

Scroll right and down than the missallignment appear.

Add
autoRowSize: true,
to fix the problem.

But the problem still appears.

Hi,

i know its not a issue but I can´t get the current data and send it with axios for example.

It is possible to get a basic code for that? Thanks

When I click the right mouse button, select any border in the table line, and the error message will be prompted

The install process for this wrapper is pretty complicated -- it seems like it'd be easier if the wrapper had a precompiled distribution, like the main HOT library. The dependencies (including HOT itself) could be provided as externals and listed as peerDependencies.

How can I use textRenderer or imgRenderer function in vue handsontable package? I am validating a CSV file and I need to highlight the error cells / td.

but there is no problem while not using vue version
https://jsfiddle.net/105e9ope/89/

Hi Everyone,

I'm trying to make the grid re-render, however I cant figure out how to do it.

According to the official documentation I need to reference the Handsontable object. But I cant access it from the Handsontable Vue Component.

'Understand Binding as a Reference':

  hot1 = new Handsontable(container1, settings1);
  data1[0][1] = 'Ford';
  hot1.render();

Any suggestions?

Thanks in advance!

Validation works when data is formatted as an array of arrays, but does not work when using an array of objects with a column definitions that use the data property.

See https://codepen.io/anon/pen/ZxVMqE?editors=0010 for an example.

PS: This issue was created based on a conversation found in Issue #35. Please see those comments for additional details.

I added license key to the setting being passed in and it still doesnt get rid of the trial div and i still get a console log error.

Now in HotTable.vue

<template>
  <div :id="this.root"></div>
</template>

In Vue templates there is no need to write this

Hi there,
I found that can not run vue-handsontable-official in IE browser.
Even the demo page can not work too..

Hi,

I am trying to wire up handsontable with vue. I am using feathers on the backend, and I am using vue-feathers to access my service.

   this.$feathers
      .service("teams")
      .find()
      .then(d => {
        this.users = d.data;
      });

the data is there, but if I put it into hottable:

<HotTable root="root" :data="users" />
It doesn't work. I am new to websockets, is there some lifecycle hook I need to do before I load the websocket data?

Anybody can help me?

this is my webpack.config.

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'eval-source-map',
  devServer: {
    historyApiFallback: true,
    compress: true,
    disableHostCheck: true,
    noInfo: true
  },
  debug: true,
  entry: [
    './src/index'
  ],
  externals: {
   "BMap": "BMap" 
  }, 
  output: {
    path: process.cwd(),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      favicon:path.join(__dirname,'src/favicon.ico'),
      template: path.join(__dirname,'src/index.html'),
      inject: true
    }),
    new ExtractTextPlugin('[hash:8].style.css', { allChunks: true })
  ],
  module: {
    loaders: [
      {
        test: require.resolve('hot-formula-parser/dist/formula-parser.js'),
        loader: 'expose-loader?formulaParser'
      },
      {
        test: require.resolve('numbro'),
        loader: 'expose-loader?numbro'
      },
      {
        test: require.resolve('moment'),
        loader: 'expose-loader?moment'
      },
      {
        test: require.resolve('pikaday'),
        loader: 'expose-loader?Pikaday'
      },
      {
        test: require.resolve('zeroclipboard'),
        loader: 'expose-loader?ZeroClipboard'
      },
      {
        test: /vue-preview.src.*?js$/,
        loader: 'babel'
      },
      { test: /\.vue$/,loader: 'vue'}, 
      { test: /\.js$/, loader: 'babel', exclude: /node_modules|vue\/dist|vue-hot-reload-api|vue-router\/|vue-loader/}, 
      { test: /\.css$/, loader: 'style-loader!css-loader?{ "safe": true , "autoprefixer": { "add": true, "browsers": ["IE >= 8"] }}'},
      { test: /\.less$/, loader: "style!css!less" },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }
    ]
  },
  resolve: {
    root: path.resolve(__dirname, 'node_modules'),
    extensions: ['','.js','.vue','.less'],
    alias: {
      'vue': 'vue/dist/vue.js',
      'src': path.resolve(__dirname, './src'),
      'assets': path.resolve(__dirname, './src/assets'),
      'components': path.resolve(__dirname, './src/components'),
      'pages': path.resolve(__dirname, './src/pages')
    }
  }
}

Hello,
I'm using the latest vue version, and found an issue that the data is not being changed after manual moved
the data from the handsontable.

The HotTable is defined as below:
<HotTable :root="root" :settings="hotSettings"></HotTable>

In hotSettings, I've put manualRowMove: true inside:
this.hotLayoutSettings = { data: this.data, rowHeaders: true, colHeaders: ['Name', 'Type', 'Length'], autoWrapRow: false, contextMenu: { items: { "row_above": {}, "row_below": {}, "hsep1": "---------", "remove_row": {} } }, fillHandle: "vertical", fixedColumnsLeft: 0, fixedRowsTop: 0, manualRowMove: true, manualColumnResize: true, minSpareRows: 1, columns: [ { data: 'name', type: 'text', allowEmpty: false }, { data: 'type', type: 'dropdown', source: ['CH', 'ZD', 'PD', 'PD0', 'FI', 'BI', 'FL', 'AQ', 'AC', 'D1', 'D2', 'CSF', 'UFF', 'SFF', 'CSL', 'CLO', 'CTO', 'ASL', 'AST'], strict: true, allowEmpty: false }, { data: 'length', type: 'numeric', numericFormat: { pattern: '0' }, allowEmpty: false } ], stretchH: 'all' }; }

However, after moved the data from the webpage, this.data was not changed - only UI was changed.

Would you please help to solve this issue? Thanks!!

Hello team, I'm having an issue with the following workflow:

1. Importing vue-handsontable-official into my component.
   import VueHandsonTable from 'vue-handsontable-official';
2. Trying to register a customRenderer by calling Handsontable.renderers.registerRenderer with all the necessary arguments and then getting:

ReferenceError: Handsontable is not defined

3. Then trying to import Handsontable explicitly:
   import Handsontable from 'handsontable';

and then getting:

[Vue warn]: Error in callback for watcher "data": "Error: No registered renderer found under "MyRenderer" name"

I also tried registering my custom renderer in my entry JS file, to no avail.

After all I tried all possible combinations and ended up with such a beginning of a component:

import HotTable from 'vue-handsontable-official';
import Vue from 'vue';
import Handsontable from 'handsontable';
Handsontable.renderers.registerRenderer('MyRenderer', function (instance, td, row, column, prop, value, cellProperties) {
    td.innerText = moment.unix(value).format('DD.MM.YYYY hh:mm:ss');
    return td;
});

I managed to succeed when trying to make custom renderers for Handsontable without Vue and this wrapper component, but how do I add to custom renderers with vue-handsontable-official? The documentation isn't clear about this moment, so one would suppose that the process of registering of custom renderers is no different than in "vanilla JS" version, but maybe there's some extra trick into it?

Would be grateful for any help. Thanks in advance.

When using vue-handsontable-official, there are many errors in the style when putting it into the project. How can I solve this problem?
That's one of the problems:
1.I don't want to add 2 rows automatically,What I need to do?

Refactor the wrapper, so it introduces scopes (@handsontable/vue and @handsontable-pro/vue), creates a distributable builds and removes the handsontable's css files from the builds.

When I set minSpareRows=1 as a prop or in hotSettings, I get an infinite update loop warning, a large number of blank rows are added to the table and multiple 'loadData' events are emitted.