This page covers a non-latest version of Handsontable.
# Row height
# Overview
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 = new Handsontable(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 = new Handsontable(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 = new Handsontable(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 = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(5, 5),
height: 'auto',
colHeaders: true,
rowHeaders: true,
rowHeights: 40,
manualRowResize: true,
licenseKey: 'non-commercial-and-evaluation'
});