This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# ManualColumnResize

# Description

This plugin allows to change columns width. To make columns width persistent the Options#persistentState plugin should be enabled.

The plugin creates additional components to make resizing possibly using user interface:

  • handle - the draggable element that sets the desired width of the column.
  • guide - the helper guide that shows the desired width as a vertical guide.

# Options

# manualColumnResize

Source code (opens new window)

manualColumnResize.manualColumnResize : boolean | Array<number>

The manualColumnResize option configures the ManualColumnResize plugin.

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

Setting Description
true Enable the ManualColumnResize plugin
false Disable the ManualColumnResize plugin
An array - Enable the ManualColumnResize plugin
- Set initial widths of individual columns

Read more:

Default: undefined Example

// enable the `manualColumnResize` plugin
manualColumnResize: true,

// enable the `manualColumnResize` plugin
// set the initial width of column 0 to 40 pixels
// set the initial width of column 1 to 50 pixels
// set the initial width of column 2 to 60 pixels
manualColumnResize: [40, 50, 60],

# Methods

# clearManualSize

Source code (opens new window)

manualColumnResize.clearManualSize(column)

Clears the cache for the specified column index.

Param Type Description
column number Visual column index.

# destroy

Source code (opens new window)

manualColumnResize.destroy()

Destroys the plugin instance.

# disablePlugin

Source code (opens new window)

manualColumnResize.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)

manualColumnResize.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

# isEnabled

Source code (opens new window)

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

# loadManualColumnWidths

Source code (opens new window)

manualColumnResize.loadManualColumnWidths() ⇒ Array

Loads the previously saved sizes using the persistentState plugin (the Options#persistentState option has to be enabled).

Emits: Hooks#event:persistentStateLoad

# saveManualColumnWidths

Source code (opens new window)

manualColumnResize.saveManualColumnWidths()

Saves the current sizes using the persistentState plugin (the Options#persistentState option has to be enabled).

Emits: Hooks#event:persistentStateSave

# setManualSize

Source code (opens new window)

manualColumnResize.setManualSize(column, width) ⇒ number

Sets the new width for specified column index.

Param Type Description
column number Visual column index.
width number Column width (no less than 20px).

Returns: number - Returns new width.

# updatePlugin

Source code (opens new window)

manualColumnResize.updatePlugin()

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

Last Updated: Jul 15, 2022