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 = "autoColumnSize"; export declare const PLUGIN_PRIORITY = 10; /** * @plugin AutoColumnSize * @class AutoColumnSize * * @description * This plugin allows to set column widths based on their widest cells. * * By default, the plugin is declared as `undefined`, which makes it enabled (same as if it was declared as `true`). * Enabling this plugin may decrease the overall table performance, as it needs to calculate the widths of all cells to * resize the columns accordingly. * If you experience problems with the performance, try turning this feature off and declaring the column widths manually. * * Column width 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 columns) or a percentage value to a config object: * * ```js * // as a number (300 columns in sync, rest async) * autoColumnSize: {syncLimit: 300}, * * // as a string (percent) * autoColumnSize: {syncLimit: '40%'}, * ``` * * The plugin uses {@link GhostTable} and {@link SamplesGenerator} for calculations. * First, {@link SamplesGenerator} prepares samples of data with its coordinates. * Next {@link GhostTable} uses coordinates to get cells' renderers and append all to the DOM through DocumentFragment. * * Sampling accepts additional options: * - *samplingRatio* - Defines how many samples for the same length will be used to calculate. Default is `3`. * * ```js * autoColumnSize: { * samplingRatio: 10, * } * ``` * * - *allowSampleDuplicates* - Defines if duplicated values might be used in sampling. Default is `false`. * * ```js * autoColumnSize: { * allowSampleDuplicates: true, * } * ``` * * To configure this plugin see {@link Options#autoColumnSize}. * * @example * * ::: only-for javascript * ```js * const hot = new Handsontable(document.getElementById('example'), { * data: getData(), * autoColumnSize: true * }); * // Access to plugin instance: * const plugin = hot.getPlugin('autoColumnSize'); * * plugin.getColumnWidth(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('autoColumnSize'); * * plugin.getColumnWidth(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(), * autoColumnSize: true, * }; * * ngAfterViewInit(): void { * // Access to plugin instance: * const hot = this.hotTable.hotInstance; * const plugin = hot.getPlugin("autoColumnSize"); * * plugin.getColumnWidth(4); * * if (plugin.isEnabled()) { * // code... * } * } * * private getData(): Array<*> { * //get some data * } * } * ``` * * ::: */ export declare class AutoColumnSize 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 columns processed in a single calculation step during asynchronous sizing. */ static get CALCULATION_STEP(): number; /** * Returns the maximum number of columns whose widths are calculated synchronously before switching to async mode. */ static get SYNC_CALCULATION_LIMIT(): number; /** * Instance of {@link GhostTable} for rows and columns size calculations. * * @private * @type {GhostTable} */ ghostTable: GhostTable; /** * Instance of {@link SamplesGenerator} for generating samples necessary for columns width calculations. * * @private * @type {SamplesGenerator} * @fires Hooks#modifyAutoColumnSizeSeed */ samplesGenerator: SamplesGenerator; /** * `true` if the size calculation is in progress. * * @type {boolean} */ inProgress: boolean; /** * Number of already measured columns (we already know their sizes). * * @type {number} */ measuredColumns: number; /** * PhysicalIndexToValueMap to keep and track widths for physical column indexes. * * @private * @type {PhysicalIndexToValueMap} */ columnWidthsMap: IndexToValueMap; /** * Initializes the plugin, registers the column widths map, and sets up the column 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 #enablePlugin} method is called. * * @returns {boolean} */ isEnabled(): boolean; /** * Enables the plugin functionality for this Handsontable instance. */ enablePlugin(): void; /** * Updates the plugin's state. This method is executed when {@link Core#updateSettings} is invoked. */ updatePlugin(): void; /** * Disables the plugin functionality for this Handsontable instance. */ disablePlugin(): void; /** * Calculates widths for visible columns in the viewport only. */ calculateVisibleColumnsWidth(): void; /** * Calculates a columns width. * * @param {number|object} colRange Visual column index or an object with `from` and `to` visual indexes as a range. * @param {number|object} rowRange Visual row index or an object with `from` and `to` visual indexes as a range. * @param {boolean} [overwriteCache=false] If `true` the calculation will be processed regardless of whether the width exists in the cache. */ calculateColumnsWidth(colRange?: number | { from: number; to: number; }, rowRange?: number | { from: number; to: number; }, overwriteCache?: boolean): void; /** * Calculates all columns width. The calculated column will be cached in the {@link AutoColumnSize#widths} property. * To retrieve width for specified column use {@link AutoColumnSize#getColumnWidth} method. * * @param {object|number} rowRange 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. */ calculateAllColumnsWidth(rowRange?: number | { from: number; to: number; }, overwriteCache?: boolean): void; /** * Recalculates all columns width (overwrite cache values). */ recalculateAllColumnsWidth(): void; /** * Gets value which tells how many columns should be calculated synchronously (rest of the columns will be calculated * asynchronously). The limit is calculated based on `syncLimit` set to `autoColumnSize` option (see {@link Options#autoColumnSize}). * * @returns {number} */ getSyncCalculationLimit(): number; /** * Gets the calculated column width. * * @param {number} column Visual column index. * @param {number} [defaultWidth] Default column width. It will be picked up if no calculated width found. * @param {boolean} [keepMinimum=true] If `true` then returned value won't be smaller then 50 (default column width). * @returns {number} */ getColumnWidth(column: number, defaultWidth?: number, keepMinimum?: boolean): number | undefined; /** * Gets the first visible column. * * @returns {number} Returns visual column index, -1 if table is not rendered or if there are no columns to base the the calculations on. */ getFirstVisibleColumn(): number; /** * Gets the last visible column. * * @returns {number} Returns visual column index or -1 if table is not rendered. */ getLastVisibleColumn(): number; /** * Collects all columns which titles has been changed in comparison to the previous state. * * @private * @returns {Array} It returns an array of visual column indexes. */ findColumnsWhereHeaderWasChanged(): number[]; /** * Clears cache of calculated column widths. If you want to clear only selected columns pass an array with their indexes. * Otherwise whole cache will be cleared. * * @param {number[]} [physicalColumns] List of physical column indexes to clear. */ clearCache(physicalColumns?: number[]): void; /** * Checks if all widths were calculated. If not then return `true` (need recalculate). * * @returns {boolean} */ isNeedRecalculate(): boolean; /** * Destroys the plugin instance. */ destroy(): void; }