React Data Grid ManualColumnResize

In this article

• Description
• Options
  • manualColumnResize
• Methods
  • clearManualSize
  • destroy
  • disablePlugin
  • enablePlugin
  • isEnabled
  • loadManualColumnWidths
  • saveManualColumnWidths
  • setManualSize
  • updatePlugin

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:

• Column width: Column stretching

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 then 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's state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

• manualColumnResize