React Data GridAutoColumnSize


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:

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

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

The plugin uses GhostTable and SamplesGenerator for calculations. First, SamplesGenerator prepares samples of data with its coordinates. Next 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.
  autoColumnSize: {
    samplingRatio: 10,
  • allowSampleDuplicates - Defines if duplicated values might be used in sampling. Default is false.
  autoColumnSize: {
    allowSampleDuplicates: true,

To configure this plugin see Options#autoColumnSize.


const hotRef = useRef(null);


// First, let's contruct Handsontable


// Access to plugin instance:
const hot = hotRef.current.hotInstance;
const plugin = hot.getPlugin('autoColumnSize');


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



Source code

autoColumnSize.autoColumnSize : object | boolean

The autoColumnSize option configures the AutoColumnSize plugin.

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

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

If you set the autoColumnSize option to an object, you can set the following AutoColumnSize plugin options:

Property Possible values Description
syncLimit A number | A percentage string The number/percentage of columns to keep in sync
(default: 50)
useHeaders true | false When calculating column widths:
true: use column headers
false: don't use column headers
samplingRatio A number The number of samples of the same length to be used in column width calculations
allowSampleDuplicates true | false When calculating column widths:
true: Allow duplicate samples
false: Don't allow duplicate samples

By default, the autoColumnSize option is set to undefined, but the AutoColumnSize plugin acts as enabled. To disable the AutoColumnSize plugin completely, set the autoColumnSize option to false.

Using the colWidths option forcibly disables the AutoColumnSize plugin.

Read more:

Default: undefined

autoColumnSize: {
  // keep 40% of columns in sync (the rest of columns: async)
  syncLimit: '40%',
  // when calculating column widths, use column headers
  useHeaders: true,
  // when calculating column widths, use 10 samples of the same length
  samplingRatio: 10,
  // when calculating column widths, allow duplicate samples
  allowSampleDuplicates: true



Source code

autoColumnSize.inProgress : boolean

true if the size calculation is in progress.


Source code

autoColumnSize.measuredColumns : number

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



Source code


Calculates all columns width. The calculated column will be cached in the AutoColumnSize#widths property. To retrieve width for specified column use AutoColumnSize#getColumnWidth method.

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


Source code

autoColumnSize.calculateColumnsWidth(colRange, rowRange, [force])

Calculates a columns width.

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


Source code


Calculates visible columns width.


Source code


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 Type Description
[columns] Array<number> optional List of physical column indexes to clear.


Source code


Destroys the plugin instance.


Source code


Disables the plugin functionality for this Handsontable instance.


Source code


Enables the plugin functionality for this Handsontable instance.


Source code

autoColumnSize.getColumnWidth(column, [defaultWidth], [keepMinimum]) ⇒ number

Gets the calculated column width.

Param Type Default Description
column number Visual column index.
[defaultWidth] number optional Default column width. It will be picked up if no calculated width found.
[keepMinimum] boolean true optional If true then returned value won't be smaller then 50 (default column width).


Source code

autoColumnSize.getFirstVisibleColumn() ⇒ number

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.


Source code

autoColumnSize.getLastVisibleColumn() ⇒ number

Gets the last visible column.

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


Source code

autoColumnSize.getSyncCalculationLimit() ⇒ number

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 Options#autoColumnSize).


Source code

autoColumnSize.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 #enablePlugin method is called.


Source code

autoColumnSize.isNeedRecalculate() ⇒ boolean

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


Source code


Recalculates all columns width (overwrite cache values).


Source code


Updates the plugin's state. This method is executed when Core#updateSettings is invoked.