Celloption performence issue

Tags: #<Tag:0x00007f8b1ad73870>
#1

I’m telling you that there is a performance issue while using handsontable.

Currently, when developing the web, we are making tables with handsontables. Here, we confirmed that table performance is very slow when cell-option is used, but cell-option itself is not a problem, and changing the read-only property of cell properties results in very poor performance. Can we check the question?

[This is the current table setting state]

createInputTable(docQ(.${identifier} #tab2 #CenterA), true, md[‘tableA’], {
width: ‘49%’,
colWidths: [1,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,30,30,30],
rowHeights: 10,
rowHeaders: false,
colHeaders: false,
autoRowSize: false,
autoColSize: false,
renderer: “html”,
stretchH : ‘none’,
renderAllRows: true,
cells: cellOption
})
It’s a 34 x 21 table.

[This is the current celloption state]
cellOption = function(row, col, prop) {
var cellProperties = {};
if (row < 2){
cellProperties.renderer = headerRenderer
}
if (col > 1 && row > 1) {
cellProperties.readOnly = false
}
if (col == 20 && row > 1) {
cellProperties.type = ‘checkbox’
}
return cellProperties
}

#2

Hi @curlydoggi

It looks like readOnly option isn’t the reason for performance issue. The reason might be a couple of condition statements that are executing every time after each render.

#3

The option to change the custom renderer and cell type among the parts in the code above is not a problem. In fact, when only the read-only option is removed and executed, the table operates at a normal speed, but only when the read-only option is inserted. In fact, events that move from cell to cell by keyboard exceed 2 or 3 second.

Is there a way to improve the performance when all cell options are not excluded and are configured according to the above code?

#4

For now, it seems that there is a problem only when the table is editable. When I make a handsontable in my project, I usually set all the cells to readonly : true and then change only the cells I need to false, and the performance between true and false is significantly different. The message below is a vibration error that occurs when moving to the keyboard on the cell where the readonly option is added false.

image
image.png794×404 15.9 KB

#5

Hi @curlydoggi

Are you testing in jsfiddle or locally? If in jsfiddle, then it might be the reason for worse performance. However, if you’re testing locally and the issue persists can you share your headerRenderer code?

#6

The renders and events currently in use at Hansontable are as follows.

  1. const headerRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = ‘var(–mc5)’;
    td.style.color = ‘var(–mfc2)’;
    };

  2. cellProperties.type = ‘checkbox’

  3. cellProperties.readOnly = ‘false’

  4. mergeCells

#7

As I said before, when each test was conducted one by one, there was a problem only when the readOnly attribute was added, and there was no performance problem using any other event, option, or renderer except the readOnly attribute.

#8

Hi @curlydoggi

It seems that this case requires more testing and possibly a code review sessions. Please send us your license key on support@handsontable.com so we can check your support plan.

#9