The initial table is not displayed

Tags: #<Tag:0x00007f8b1df49638>
#1

Hi there!, I’m using hot-table (handsontable v10.0.0) tag and working with Angular(v11).
I’m initializing the table with the following:

child.html

Blockquote

<hot-table [hotId]=“hotTableId” [data]=“data” [settings]=“settings”>

child.ts
settings = {
filters: false,
cells: function(row) {
var cp = {type: ‘numeric’};
if (row === 0 || row === 2){
cp.type = ‘text’
}
else if (row === 1){
cp.type = ‘checkbox’
}
return cp;
},
rowHeaders: LABELS,
bindRowsWithHeaders: true,
rowHeaderWidth: 150,
colWidths: [165, 165, 165, 165, 165],
className: ‘htCenter’,
readOnly: true,
afterGetRowHeader: function(index, TH) {
var text;
let icon = ‘’;
const title1 = “title1”;
const title2= “title2”;
const title3= “title3”;
const title4 = “title4”;
const title5 = “title5”;
const title6 =“title6”;
const title7 = “title7”;
switch(index){
case 0:
text = title1;
break;
case 1:
text = title2;
break;
case 2:
text = title3;
break;
case 3:
text = title4;
break;
case 4:
text = title5;
break;
case 5:
text = title6;
break;
case 6:
text = title7;
break;
default:
text = undefined;
break;
}
if(text){
TH.setAttribute(‘title’, text);
TH.firstChild.firstChild.insertAdjacentHTML(‘beforeEnd’, icon);
}
TH.setAttribute(‘style’, ‘text-align:left’);
},
licenseKey: ‘non-comercial’
};

data = [
{
variant1 : “variant Name 1” ,
variant2 : “variant Name 2” ,
variant3 : “variant Name 3” ,
variant4 : “variant Name 4” ,
variant5 : “variant Name 5”
},
{
variant1 : true ,
variant2 : false ,
variant3 : false ,
variant4 : false ,
variant5 : false
},
{
variant1 : “Description variant 1” ,
variant2 : “Description variant 2” ,
variant3 : “Description variant 3” ,
variant4 : “Description variant 4” ,
variant5 : “Description variant 5”
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
},
{
variant1 : 0,
variant2 : 0,
variant3 : 0,
variant4 : 0,
variant5 : 0
}];
hotTableId = ‘idTable’;

here is the issue,

At the time of starting the application and showing the initial kick, the table is not shown but inspecting the code in the browser the table is built correctly, but has a style with width and height in zero. and is displayed only after rendering the screen or updating the table settings.

I tried to get the hot table with HotTableRegisterer and call the renderer function but still not displayed and if I add the call in the ts class constructor is throwing an error that getIntance(hotTableId) cannot find isDistroyed.

please let me know if you need anything else about this, I hope you can help me with it.

#2

Thank you for sharing the details about the implementation, @luis.medina2

I will update you after the weekend with the review feedback.

#3

thank you @aleksandra_budnik and also has a slower behavior when scrolling the table I tried to update setting with next:

settings = {
filters: false,
rowHeaders: LABELS,
rowHeaderWidth: 150,
colWidths: 165,
className: ‘htCenter’,
readOnly: true,
autoColumnSize: false,
allowEmpty: true,
allowInsertColumn: false,
allowInsertRow: false,
allowRemoveColumn: false,
allowRemoveRow: false,
minCols: 5,
minRows: 12,
maxRows: 12,
renderAllRows: true,
…

but still slowly behavior

#4

Hi @luis.medina2

Could you please check the following demo https://jsfiddle.net/ex23b70v/1/
I used your settings but there seems to be something missing in the afterGetRowHeader hook that blocks the table from rendering the headers.

#5

Hi @aleksandra_budnik thanks for reply I updated the code in JSFiddle but is throwing and error in console https://jsfiddle.net/LuisGtz/4h1568cd/3/ I find the solution for display the handsontable the first time,
we use the next code:
constructor(private cd: ChangeDetectorRef …
…
ngAfterContentChecked() {
this.cd.detectChanges();
this.hotTableInstance = this.hotRegisterer.getInstance(this.hotTableId);
this.hotTableInstance.render();
}

but slowly behavior still present when click on cell or update values I find this article on this forum (afterChange causing performance issues) and I need implemented that and copyPaste in edit mode:

settingsEdit = {
copyPaste: true,
readOnly: false,
afterChange: function (change, source) {
if (source === ‘loadData’) {
return; //don’t save this change
} else if (source === ‘edit’) {
//here is catching the data to save it
}
}
};

I’m not sure if afterChange is the issue

#6

In the linked forum thread selection-related logic was the heaviest one.
I think that when you comment on the logic of

//here is catching the data to save it

you will have some overall view if that is changing the performance.

Also from the listed options in your post renderAllRows: true is heavy when you have a large dataset as it forces all the cells to render (been those outside the viewport).

#7