Strange behavior in row headers Vue Handsontable

#1

Hello!

I noticed strange behavior in row headers via Vue Handsontable. Look for example: (https://codesandbox.io/s/priceless-brown-sfdhj?file=/src/App.vue).

When the page loads only several row headers renders correctly. Others become “1”, but when we collapse/uncollapse some row, all headers are loaded. Don’t understand what it happens. Could you please help?

You can reproduce the error by increasing or deleting some records in dataSource.

In my Safari browser I had these error:
[Error] [Vue warn]: Error in callback for watcher “mergedHotSettings”: “TypeError: undefined is not an object (evaluating ‘this.hotInstance.rowIndexMapper.getNumberOfIndexes’)”

found in

—>
at src/HS.vue

warn (vue.runtime.esm.js:620)
logError (vue.runtime.esm.js:1883)
globalHandleError (vue.runtime.esm.js:1878)
handleError (vue.runtime.esm.js:1838)
run (vue.runtime.esm.js:4564)
flushSchedulerQueue (vue.runtime.esm.js:4304)
(anonymous function) (vue.runtime.esm.js:1979)
flushCallbacks (vue.runtime.esm.js:1905)
promiseReactionJob
[Error] TypeError: undefined is not an object (evaluating ‘this.hotInstance.rowIndexMapper.getNumberOfIndexes’)
logError (vue.runtime.esm.js:1887)
globalHandleError (vue.runtime.esm.js:1878)
handleError (vue.runtime.esm.js:1838)
run (vue.runtime.esm.js:4564)
flushSchedulerQueue (vue.runtime.esm.js:4304)
(anonymous function) (vue.runtime.esm.js:1979)
flushCallbacks (vue.runtime.esm.js:1905)
promiseReactionJob

#2

Thank you for sharing the issue report.

I could see the ‘1’ headers only for a split of a second, so the issue might be related to the speed of loading the resources. However, I will investigate this issue further and update you tomorrow.

#3

Hi @shalnov.ya

I will update you on Monday. Today I did not find any valuable results to solve this case.

#4

Hi @shalnov.ya

the use of bindRowsWithHeaders is breaking the visibility of the nested rows.

#5