Handson table cell editing is slow when data is large and viewColumnRenderingOffset is set to maximum columns

Tags: #<Tag:0x00007fa98d7e3a90>


I have a usage of handson table where there are 20*300 cells. When setting viewportColumnRenderingOffset to 300 (to improve the scrolling lag), the scrolling seems to fine, but the cell editing is very slow. It takes almost 15 secs, to edit a cell. This is because, I noticed that afterCellSetMetaData gets called individually for each of the cell even when one of the cell is edited.

Please can you suggest what I’m missing here or is this some performance bug from your side.

Hey @shwetas187

besides the prefefined features (that you turn on my setting up true) what do you use? Do you use custom functions?


No I don’t use any custom functions or any renderer. It seems when I set the viewportColumnRenderingOffset to the number of the columns, all the cells are loaded, and hence the editing takes time because afterCellSetMetaData is called for every cell.

How do I improve this, because for smooth scrolling I would require viewportColumnRenderingOffset to get set as the number of the columns.

Please advice.

You need to add something that is ‘heavy’ for the Handsontable or a browser. Here https://jsfiddle.net/5ku2vgye/ we have 1000 x 1000 cells and they edit and scroll super-fast.

What are you changing in the meta data of the cells?

I am changing nothing in the meta-data of the cells, i just had a call-back of it to check how many times it gets called.
What do you mean by ‘heavy’? I also see that in your demo you have not used viewportColumnRenderingOffset and hence the offset is calculated by handson table as mentioned in your documentation which then keeps on adding the columns in the view as we scroll. But when, I try to implement the same the scroll is jittered.

Note : the data passed is in the form of array of objects and not arrays of arrays.

The options which am using in the settings object are stretchH,stretchV,fixedColumnsLeft,fixedRowsTop,formulas,colWidths.

Here’s the same demo with viewportColumnRenderingOffset: 300 enabled.



The stretchV is not a part of our official API.
However, I think that the formulas are making your application


Can you comment our the formulas and check if it also works the same? ps. Can you also send a recording of the application (if it is not confidential).

I can observe in your demo, that there is a jitter when you have viewportColumnRenderingOffset: 300.
Also,I removed the formulas option but the behaviour is same. I reckon the way the data is given to the handson table is the difference. I suspect in your case the dataset is in the form of Array of arrays.
Can you share the same demo with dataset as array of objects

Ps: I can’t send the recording as the information is confidential.

Ps: I can’t send the recording as the information is confidential.

That is OK.

Here’s a demo with an object data https://jsfiddle.net/8ztabwrq/
It is a bit slower when you move those 300 columns but that is a known issue. You either can load all data at once (make it super faster after loading, but slow on the beginning) or keep the default settings when you render each couple of columns while scrolling.

How can I improve the lag in editing a cell? Because when loading all data at once, editing a cell takes approx 10 secs.

How can I improve the lag in editing a cell?

the demo that I have shared is a base. The version 7.4.2 is not able to work faster than this https://jsfiddle.net/rnpw4a65/ those are optimal settings.
We got some feedback that the beta is slightly faster

https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.css https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.js

but I think that the overall experience is positive. The

handson table where there are 20*300 cells

should load fast and without glitches or lags

So the only difference now I can think of is the use of formula’s. Can that be culprit.?

The formulas are forcing cells to recalculate. Sometimes it might be better to use
saetDataAtCell/ getDataAtCell methods but I would need to check all your settings to propose something more.

I’ll share the settings or probably create a dummy demo and share it with you soon.

Hope that helps.

OK. great. I’ll wait.

Hey @shwetas187, any updates?

Hi @aleksandra_budnik , please allow me some more time, as I have not got the demo ready for you yet.
I’ll notify you soon.

Thank you

Hey @shwetas187

It will be hard for me to follow up on this subject as it moves on to the bottom of the tickets list.

I suggest to close it up now and just create a follow-up ticket once you’ll be ready to continue the subject. Once I close it the history of conversation and content is still available so we do not miss a thing.