CODEWITHSUNDEEP
javascripthtmlhandsontable
Yasiru Nilan
Yasiru Nilan

Reputation: 457

How to change the height parameter of the Handsontable dynamically

I'm using Handsontable for my project and I need to change the height parameter dynamically.As an example if I set a predefined height value then if there are less number of rows at a time my div container having the table will have more remaining space. I tried by removing the height variable at declare table. Then height got auto resized and there was no remaining space.But from width side table had gone outside the div container also. Is there any work around for this?

Upvotes: 0

Views: 1798

Answers (2)

12345zp
12345zp

Reputation: 21

hot.updateSettings({height:'500'})

I use updateSettings method to change handsontable height dynamically.

Upvotes: 2

pradhyo
pradhyo

Reputation: 177

Use a function for height when creating a table

...    
[height]="getHeight()"
...

Then specify whatever logic you want.
I've used this function in the past for a similar problem: 

getHeight() {
  if (!this.targetData)
    return 250; // empty table height

  // this.hotRowHeight is the height of your row
  // rowheight * (number of rows + 3)
  // The extra 3 while calculating height: 2 for header and another for scrollbar
  var calculatedTableHeight = this.hotRowHeight * (this.targetData.length + 3); 
  var maxTableHeight = window.screen.height * 0.7;

  // sets the height of the spreadsheet to 70% of screen height or table height - whichever is smaller
  return Math.min(calculatedTableHeight, maxTableHeight);
}

Upvotes: 0

Related Questions