This page covers a non-latest version of Handsontable.

# AutoRowSize

Description
Options
- autoRowSize
Members
- inProgress
- measuredRows
Methods

# Description

This plugin allows to set row heights based on their highest cells.

By default, the plugin is declared as undefined, which makes it disabled (same as if it was declared as false). Enabling this plugin may decrease the overall table performance, as it needs to calculate the heights of all cells to resize the rows accordingly. If you experience problems with the performance, try turning this feature off and declaring the row heights manually.

Row height calculations are divided into sync and async part. Each of this parts has their own advantages and disadvantages. Synchronous calculations are faster but they block the browser UI, while the slower asynchronous operations don't block the browser UI.

To configure the sync/async distribution, you can pass an absolute value (number of rows) or a percentage value to a config object:

// as a number (300 rows in sync, rest async)
autoRowSize: {syncLimit: 300},.

// as a string (percent)
autoRowSize: {syncLimit: '40%'},.

// allow sample duplication
autoRowSize: {syncLimit: '40%', allowSampleDuplicates: true},

You can also use the allowSampleDuplicates option to allow sampling duplicate values when calculating the row height. Note, that this might have a negative impact on performance.

To configure this plugin see Options#autoRowSize.

Example

const hot = new Handsontable(document.getElementById('example'), {
  data: getData(),
  autoRowSize: true
});
// Access to plugin instance:
const plugin = hot.getPlugin('autoRowSize');

plugin.getRowHeight(4);

if (plugin.isEnabled()) {
  // code...
}

# Options

# autoRowSize

autoRowSize.autoRowSize : object | boolean

Enables or disables AutoRowSize plugin. Default value is undefined, which has the same effect as false (disabled). Enabling this plugin can decrease performance, as size-related calculations would be performed.

Note: the default syncLimit value is set to 500 when the plugin is manually enabled by declaring it as: autoRowSize: true.

Row height calculations are divided into sync and async stages. Each of these stages has their own advantages and disadvantages. Synchronous calculations are faster but they block the browser UI, while the slower asynchronous operations don't block the browser UI.

To configure the sync/async distribution, you can pass an absolute value (number of rows) or a percentage value.

Default: undefined Example

// as a number (300 rows in sync, rest async)
autoRowSize: {syncLimit: 300},

// as a string (percent)
autoRowSize: {syncLimit: '40%'},

# Members

# inProgress

autoRowSize.inProgress : boolean

true if the size calculation is in progress.

# measuredRows

autoRowSize.measuredRows : number

Number of already measured rows (we already know their sizes).

# Methods

# calculateAllRowsHeight

autoRowSize.calculateAllRowsHeight(colRange)

Calculate all rows heights. The calculated row will be cached in the AutoRowSize#heights property. To retrieve height for specified row use AutoRowSize#getRowHeight method.

Param	Type	Description
colRange	`object` `number`	Row index or an object with `from` and `to` properties which define row range.

# calculateRowsHeight

autoRowSize.calculateRowsHeight(rowRange, colRange, [force])

Calculate a given rows height.

Param	Type	Default	Description
rowRange	`number` `object`		Row index or an object with `from` and `to` indexes as a range.
colRange	`number` `object`		Column index or an object with `from` and `to` indexes as a range.
[force]	`boolean`	`false`	`optional` If `true` the calculation will be processed regardless of whether the width exists in the cache.

# clearCache

autoRowSize.clearCache()

Clears cached heights.

# clearCacheByRange

autoRowSize.clearCacheByRange(range)

Clears cache by range.

Param	Type	Description
range	`object` `number`	Row index or an object with `from` and `to` properties which define row range.

# destroy

autoRowSize.destroy()

Destroys the plugin instance.

# disablePlugin

autoRowSize.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

# enablePlugin

autoRowSize.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

# getColumnHeaderHeight

autoRowSize.getColumnHeaderHeight() ⇒ number | undefined

Get the calculated column header height.

# getFirstVisibleRow

autoRowSize.getFirstVisibleRow() ⇒ number

Get the first visible row.

Returns: number - Returns row index, -1 if table is not rendered or if there are no rows to base the the calculations on.

# getLastVisibleRow

autoRowSize.getLastVisibleRow() ⇒ number

Gets the last visible row.

Returns: number - Returns row index or -1 if table is not rendered.

# getRowHeight

autoRowSize.getRowHeight(row, [defaultHeight]) ⇒ number

Gets the calculated row height.

Mind that this method is different from the Core's getRowHeight() method.

Param	Type	Description
row	`number`	Visual row index.
[defaultHeight]	`number`	`optional` Default row height. It will be picked up if no calculated height found.

# getSyncCalculationLimit

autoRowSize.getSyncCalculationLimit() ⇒ number

Gets value which tells how many rows should be calculated synchronously (rest of the rows will be calculated asynchronously). The limit is calculated based on syncLimit set to autoRowSize option (see Options#autoRowSize).

# isEnabled

autoRowSize.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true than the AutoRowSize#enablePlugin method is called.

# isNeedRecalculate

autoRowSize.isNeedRecalculate() ⇒ boolean

Checks if all heights were calculated. If not then return true (need recalculate).

# recalculateAllRowsHeight

autoRowSize.recalculateAllRowsHeight()

Recalculates all rows height (overwrite cache values).

← AutoColumnSize Autofill →