Best approach to show huge data in handsontable grid

Tags: #<Tag:0x00007efc64686110>
#1

Hi Team,

we have a grid with 50,000 rows and 35 columns. we have a single renderer which applies formatting of cell based on dataType = text vs numeric. To load 50K records, the grid freezes about 15 sec. after grid loads after 15 sec, it still takes 3-4 seconds to enable vertical/horizontal scroll, editing/selecting cells etc. so in total it takes about 20 seconds to get this grid ready for end user to work on.

what is the best approach to get rid of these lags or to improve performance of huge resultset.

thanks

How to handle a lot of cells with editable data?
#2

Hi @rohit.parwal

What does your custom renderer do? I have created a demo with 50'000 rows and 35 columns and added a custom renderer that changes styling and cell value at http://jsfiddle.net/430qderj/ and loading takes around 1-1.5s on Chrome 60 and 1,5-2s on FF 54 (Windows 10).

#3

Hello,

my custom renderer creates a href link. if user clicks on the link, it calls some function to calculate and display the result in a bootstrap modal.

I have three to four such custom renderers, the code would be similar to following:

function firstColumnRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if(col === 1){
if (row%2 == 0) {
var div = document.createElement(‘DIV’);
var a = document.createElement(‘a’);
var linkText = document.createTextNode(“View Results”);
a.appendChild(linkText);
a.title = “Click to see Results”;
a.href = “#”;
div.appendChild(a);
$(td).empty().append(div).append(a);
$(a).on(‘click’, function(e){
checkResults(row, col);
});
} else {
td.innerHTML = ‘’;
}
}
}

thanks

#4

Hi @rohit.parwal

I have added your code to my demo and got the following result http://jsfiddle.net/p1hvncfk/

Works pretty fast even first (as you proposed) four custom columns. Can you record how it works in your environment and share your OS/Browser settings?

Here’s how it works on Chrome 60/Windows 10

#5

I assume that the issue is closed as there is no reply for more than 2 weeks.

#6