AutoRowSize

Plugin: AutoRowSize

Description

The AutoRowSize plugin allows you 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.

But, to display Handsontable’s scrollbar in a proper size, you need to enable the AutoRowSize plugin, by setting the autoRowSize option to true.

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.

Tip

Note: Updating some of the table's settings can cause the row heights to change (e.g. wordWrap, textEllipsis, renderers etc.). In those cases, to ensure that the row heights are properly recalculated, you need to call the AutoRowSize#recalculateAllRowsHeight method after calling Core#updateSettings.

To configure this plugin see Options#autoRowSize.

Example

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import {
  GridSettings,
  HotTableModule,
  HotTableComponent,
} from "@handsontable/angular-wrapper";

`@Component`({
  selector: "app-example",
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table [settings]="gridSettings" />
  </div>`,
})
export class ExampleComponent implements AfterViewInit {
  `@ViewChild`(HotTableComponent, { static: false })
  readonly hotTable!: HotTableComponent;

  readonly gridSettings = <GridSettings>{
    data: this.getData(),
    autoRowSize: true,
  };

  ngAfterViewInit(): void {
    // Access to plugin instance:
    const hot = this.hotTable.hotInstance;
    const plugin = hot.getPlugin("autoRowSize");

    plugin.getRowHeight(4);

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

  private getData(): any[] {
    // get some data
  }
}

Options

autoRowSize

Source code

autoRowSize.autoRowSize : object | boolean

The autoRowSize option configures the AutoRowSize plugin.

You can set the autoRowSize option to one of the following:

Setting	Description
false	Disable the AutoRowSize plugin
true	Enable the AutoRowSize plugin with the default configuration
An object	Enable the AutoRowSize plugin and modify the plugin options

To give Handsontable’s scrollbar a proper size, set the autoRowSize option to true.

If you set the autoRowSize option to an object, you can set the following AutoRowSize plugin options:

Property	Possible values	Description
syncLimit	A number | A percentage string	The number/percentage of rows to keep in sync (default: 500)

Using the rowHeights option forcibly disables the AutoRowSize plugin.

Read more:

• Plugins: AutoRowSize

Default: undefined
Example

autoRowSize: {
  // keep 40% of rows in sync (the rest of rows: async)
  syncLimit: '40%'
},

Members

inProgress

Source code

autoRowSize.inProgress : boolean

true if the size calculation is in progress.

measuredRows

Source code

autoRowSize.measuredRows : number

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

Methods

calculateAllRowsHeight

Source code

autoRowSize.calculateAllRowsHeight(colRange, [overwriteCache])

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	Default	Description
colRange	object number		Row index or an object with from and to properties which define row range.
[overwriteCache]	boolean	false	optional If true the calculation will be processed regardless of whether the width exists in the cache.

calculateRowsHeight

Source code

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

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.
[overwriteCache]	boolean	false	optional If true the calculation will be processed regardless of whether the width exists in the cache.

calculateVisibleRowsHeight

Source code

autoRowSize.calculateVisibleRowsHeight()

Calculates heights for visible rows in the viewport only.

clearCache

Source code

autoRowSize.clearCache([physicalRows])

Clears cache of calculated row heights. If you want to clear only selected rows pass an array with their indexes. Otherwise whole cache will be cleared.

Param	Type	Description
[physicalRows]	Array<number>	optional List of physical row indexes to clear.

clearCacheByRange

Source code

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

Source code

autoRowSize.destroy()

Destroys the plugin instance.

disablePlugin

Source code

autoRowSize.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

autoRowSize.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

getColumnHeaderHeight

Source code

autoRowSize.getColumnHeaderHeight() ⇒ number | undefined

Get the calculated column header height.

getFirstVisibleRow

Source code

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

Source code

autoRowSize.getLastVisibleRow() ⇒ number

Gets the last visible row.

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

getRowHeight

Source code

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

Get a row’s height, as measured in the DOM.

The height returned includes 1 px of the row’s bottom border.

Mind that this method is different from the getRowHeight() method of Handsontable’s Core.

Param	Type	Description
row	number	A visual row index.
[defaultHeight]	number	optional If no height is found, defaultHeight is returned instead.

Returns: number - The height of the specified row, in pixels.

getSyncCalculationLimit

Source code

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

Source code

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 then the AutoRowSize#enablePlugin method is called.

isNeedRecalculate

Source code

autoRowSize.isNeedRecalculate() ⇒ boolean

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

recalculateAllRowsHeight

Source code

autoRowSize.recalculateAllRowsHeight()

Recalculates all rows height (overwrite cache values).