Calculating formulas on large data causes significant slowdown

Tags: #<Tag:0x00007efc64f430a0> #<Tag:0x00007efc64f42d58>
#1

Hi,

I am encountering a problem with using formulas from a large amount of data.
Taking the example “Data grid example” in your documentation (https://handsontable.com/docs/javascript-data-grid/formula-calculation/), but putting 5000 data instead of 100 data in your example, the simple fact of modifying a cell causes a significant freeze of the page.

I even removed the last addition line to avoid a calculation of adding cells from 1 to 5000.
I only want to perform a calculation on a single line, but the amount of data affects performance.

You will find the example here : https://stackblitz.com/edit/la3swe?file=index.ts

Can you help me?

Best regards

#2

Hi @reparpex

Thank you for contacting us. This example might not be the best because it features a few configuration elements that also affects performance (fixed rows).

In general, if the performance is getting worse with the amount of the formulas in your application we recommend to move all of the calculations to the server side, so they will not stress the frontend side.

#3

I took the same example link (https://stackblitz.com/edit/la3swe?file=index.ts), and removed the superfluous configurations fixedRowsBottom, stretchH, autoWrapRow, autoWrapCol. I also simplified the data to have an extremely simple data set, the data is 1,2,3 on 5000 rows, column 4 being a simple addition of the Cell One Two Three on each row.

Despite this, we have a significant slowdown when editing cells, even more when editing several cells at once. However, it is only a simple calculation (1+2+3, so 2 additions) this should not be limiting for the frontend.

If I send the calculation to the service side, which method is better to use? setDataAtCell inside a hot.batch to have only one final render, or to reload all the data into the table? Maybe you have other suggestions.

#4

Hi @reparpex

Thank you for the update. In this case I would lean more to the solution with moving the calculations to the server side.

Yes, setDataAtCell can be used in this case, but you can also use one of those two methods, depending on your requirements: https://handsontable.com/docs/javascript-data-grid/binding-to-data/#the-data-loading-api-methods

Doing that along with batching, where you can suspend and resume rendering, should also impact the performance positively.