By default, the row height adjusts to the height of the content. The minimum height is 23px. The row height can be passed as a constant, an array, or a function.
The content inside a cell gets wrapped if it doesn't fit the cell's size.
Setting the row height as a constant
We set the same height of 40px for all rows across the entire grid in this example.
const container = document.querySelector('#example1');const hot =newHandsontable(container,{data: Handsontable.helper.createSpreadsheetData(4,5),height:'auto',colHeaders:true,rowHeaders:true,rowHeights:40,manualRowResize:true,licenseKey:'non-commercial-and-evaluation'});
Setting the row height in an array
In this example, the height is only set for the first rows. Each additional row would be automatically adjusted to the content.
const container = document.querySelector('#example2');const hot =newHandsontable(container,{data: Handsontable.helper.createSpreadsheetData(4,5),width:'100%',height:'auto',colHeaders:true,rowHeaders:true,rowHeights:[40,40,40,40],manualRowResize:true,licenseKey:'non-commercial-and-evaluation'});
Setting the row height using a function
The row height can be set using a function. In this example, the size of all rows is set using a function that takes a row index (1, 2 ...) and multiplies it by 20px for each consecutive row.
const container = document.querySelector('#example3');const hot =newHandsontable(container,{data: Handsontable.helper.createSpreadsheetData(3,5),width:'100%',height:'auto',colHeaders:true,rowHeaders:true,rowHeights(index){return(index +1)*20;},manualRowResize:true,licenseKey:'non-commercial-and-evaluation'});
Adjust the row height manually
Set the option manualRowResize to true to allow users to manually resize the row height by dragging the handle between the adjacent row headers. Don't forget to enable row headers by setting rowHeaders to true.
You can adjust the size of one or multiple rows simultaneously, even if the selected rows are not placed next to each other.
const container = document.querySelector('#example4');const hot =newHandsontable(container,{data: Handsontable.helper.createSpreadsheetData(5,5),height:'auto',colHeaders:true,rowHeaders:true,rowHeights:40,manualRowResize:true,licenseKey:'non-commercial-and-evaluation'});