import type { HotInstance } from '../../core/types'; import { BasePlugin } from '../base'; import GhostTable from '../../utils/ghostTable'; import SamplesGenerator from '../../utils/samplesGenerator'; import { PhysicalIndexToValueMap as IndexToValueMap } from '../../translations'; export declare const PLUGIN_KEY = "autoRowSize"; export declare const PLUGIN_PRIORITY = 40; /** * @plugin AutoRowSize * @class 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`](@/api/options.md#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: * ```js * // 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 {@link AutoRowSize#recalculateAllRowsHeight} method after calling {@link Core#updateSettings}. * ::: * * To configure this plugin see {@link Options#autoRowSize}. * * @example * * ::: only-for javascript * ```js * 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... * } * ``` * ::: * * ::: only-for react * ```jsx * const hotRef = useRef(null); * * ... * * // First, let's contruct Handsontable * * * ... * * // Access to plugin instance: * const hot = hotRef.current.hotInstance; * const plugin = hot.getPlugin('autoRowSize'); * * plugin.getRowHeight(4); * * if (plugin.isEnabled()) { * // code... * } * ``` * ::: * * ::: only-for angular * ```ts * import { AfterViewInit, Component, ViewChild } from "@angular/core"; * import { * GridSettings, * HotTableModule, * HotTableComponent, * } from "@handsontable/angular-wrapper"; * * `@Component`({ * selector: "app-example", * standalone: true, * imports: [HotTableModule], * template: `
* *
`, * }) * export class ExampleComponent implements AfterViewInit { * `@ViewChild`(HotTableComponent, { static: false }) * readonly hotTable!: HotTableComponent; * * readonly 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(): Array<*> { * // get some data * } * } * ``` * ::: */ export declare class AutoRowSize extends BasePlugin { #private; /** * Returns the plugin key used to identify this plugin in Handsontable settings. */ static get PLUGIN_KEY(): string; /** * Returns the priority order used to determine the order in which plugins are initialized. */ static get PLUGIN_PRIORITY(): number; /** * Returns `true` so the plugin updates on every `updateSettings` call, regardless of config object contents. */ static get SETTING_KEYS(): string[] | boolean; /** * Returns the default settings applied when the plugin is enabled without explicit configuration. */ static get DEFAULT_SETTINGS(): { useHeaders: boolean; samplingRatio: number | null; allowSampleDuplicates: boolean; }; /** * Returns the number of rows processed in a single calculation step during asynchronous sizing. */ static get CALCULATION_STEP(): number; /** * Returns the maximum number of rows whose heights are calculated synchronously before switching to async mode. */ static get SYNC_CALCULATION_LIMIT(): number; /** * Columns header's height cache. * * @private * @type {number} */ headerHeight: number | null; /** * Instance of {@link GhostTable} for rows and columns size calculations. * * @private * @type {GhostTable} */ ghostTable: GhostTable; /** * Instance of {@link SamplesGenerator} for generating samples necessary for rows height calculations. * * @private * @type {SamplesGenerator} */ samplesGenerator: SamplesGenerator; /** * `true` if the size calculation is in progress. * * @type {boolean} */ inProgress: boolean; /** * Number of already measured rows (we already know their sizes). * * @type {number} */ measuredRows: number; /** * PhysicalIndexToValueMap to keep and track heights for physical row indexes. * * @private * @type {PhysicalIndexToValueMap} */ rowHeightsMap: IndexToValueMap; /** * Initializes the plugin, registers the row heights map, and sets up the row resize hook. */ constructor(hotInstance: HotInstance); /** * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit} * hook and if it returns `true` then the {@link AutoRowSize#enablePlugin} method is called. * * @returns {boolean} */ isEnabled(): boolean; /** * Enables the plugin functionality for this Handsontable instance. */ enablePlugin(): void; /** * Disables the plugin functionality for this Handsontable instance. */ disablePlugin(): void; /** * Calculates heights for visible rows in the viewport only. */ calculateVisibleRowsHeight(): void; /** * Calculate a given rows height. * * @param {number|object} rowRange Row index or an object with `from` and `to` indexes as a range. * @param {number|object} colRange Column index or an object with `from` and `to` indexes as a range. * @param {boolean} [overwriteCache=false] If `true` the calculation will be processed regardless of whether the width exists in the cache. */ calculateRowsHeight(rowRange?: number | { from: number; to: number; }, colRange?: number | { from: number; to: number; }, overwriteCache?: boolean): void; /** * Calculate all rows heights. The calculated row will be cached in the {@link AutoRowSize#heights} property. * To retrieve height for specified row use {@link AutoRowSize#getRowHeight} method. * * @param {object|number} colRange Row index or an object with `from` and `to` properties which define row range. * @param {boolean} [overwriteCache] If `true` the calculation will be processed regardless of whether the width exists in the cache. */ calculateAllRowsHeight(colRange?: number | { from: number; to: number; }, overwriteCache?: boolean): void; /** * Recalculates all rows height (overwrite cache values). */ recalculateAllRowsHeight(): void; /** * 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 {@link Options#autoRowSize}). * * @returns {number} */ getSyncCalculationLimit(): 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()`](@/api/core.md#getrowheight) method * of Handsontable's [Core](@/api/core.md). * * @param {number} row A visual row index. * @param {number} [defaultHeight] If no height is found, `defaultHeight` is returned instead. * @returns {number} The height of the specified row, in pixels. */ getRowHeight(row: number, defaultHeight?: number): number; /** * Get the calculated column header height. * * @returns {number|undefined} */ getColumnHeaderHeight(): number | null | undefined; /** * 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. */ getFirstVisibleRow(): number; /** * Gets the last visible row. * * @returns {number} Returns row index or -1 if table is not rendered. */ getLastVisibleRow(): number; /** * 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 {number[]} [physicalRows] List of physical row indexes to clear. */ clearCache(physicalRows?: number[]): void; /** * Clears cache by range. * * @param {object|number} range Row index or an object with `from` and `to` properties which define row range. */ clearCacheByRange(range: number | { from: number; to: number; }): void; /** * Checks if all heights were calculated. If not then return `true` (need recalculate). * * @returns {boolean} */ isNeedRecalculate(): boolean; /** * Destroys the plugin instance. */ destroy(): void; }