MergeCells

Table of contents

• Description
• Options
  • mergeCells
• Methods
  • clearCollections
  • disablePlugin
  • enablePlugin
  • isEnabled
  • merge
  • mergeSelection
  • unmerge
  • unmergeSelection
  • updatePlugin

Description

Plugin, which allows merging cells in the table (using the initial configuration, API or context menu).

Example

const hot = new Handsontable(document.getElementById('example'), {
 data: getData(),
 mergeCells: [
   {row: 0, col: 3, rowspan: 3, colspan: 3},
   {row: 2, col: 6, rowspan: 2, colspan: 2},
   {row: 4, col: 8, rowspan: 3, colspan: 3}
 ],

Options

mergeCells

Source code (opens new window)

mergeCells.mergeCells : boolean | Array<object>

The mergeCells option configures the MergeCells plugin.

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

Setting	Description
true	Enable the MergeCells plugin
false	Disable the MergeCells plugin
An array of objects	- Enable the MergeCells plugin - Merge specific cells at initialization

To merge specific cells at Handsontable's initialization, set the mergeCells option to an array of objects, with the following properties:

Property	Description
row	The row index of the merged section's beginning
col	The column index of the merged section's beginning
rowspan	The width (as a number of rows) of the merged section
colspan	The height (as a number of columns ) of the merged section

Read more:

• Merge cells →

Default: false Example

// enable the `MergeCells` plugin
mergeCells: true,

// enable the `MergeCells` plugin
// and merge specific cells at initialization
mergeCells: [
  // merge cells from cell (1,1) to cell (3,3)
  {row: 1, col: 1, rowspan: 3, colspan: 3},
  // merge cells from cell (3,4) to cell (2,2)
  {row: 3, col: 4, rowspan: 2, colspan: 2},
  // merge cells from cell (5,6) to cell (3,3)
  {row: 5, col: 6, rowspan: 3, colspan: 3}
],

Methods

clearCollections

Source code (opens new window)

mergeCells.clearCollections()

Clears the merged cells from the merged cell container.

disablePlugin

Source code (opens new window)

mergeCells.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code (opens new window)

mergeCells.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

isEnabled

Source code (opens new window)

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

merge

Source code (opens new window)

mergeCells.merge(startRow, startColumn, endRow, endColumn)

Merges the specified range.

Emits: Hooks#event:beforeMergeCells, Hooks#event:afterMergeCells

Param	Type	Description
startRow	number	Start row of the merged cell.
startColumn	number	Start column of the merged cell.
endRow	number	End row of the merged cell.
endColumn	number	End column of the merged cell.

mergeSelection

Source code (opens new window)

mergeCells.mergeSelection([cellRange])

Merges the selection provided as a cell range.

Param	Type	Description
[cellRange]	CellRange	optional Selection cell range.

unmerge

Source code (opens new window)

mergeCells.unmerge(startRow, startColumn, endRow, endColumn)

Unmerges the merged cell in the provided range.

Emits: Hooks#event:beforeUnmergeCells, Hooks#event:afterUnmergeCells

Param	Type	Description
startRow	number	Start row of the merged cell.
startColumn	number	Start column of the merged cell.
endRow	number	End row of the merged cell.
endColumn	number	End column of the merged cell.

unmergeSelection

Source code (opens new window)

mergeCells.unmergeSelection([cellRange])

Unmerges the selection provided as a cell range.

Param	Type	Description
[cellRange]	CellRange	optional Selection cell range.

updatePlugin

Source code (opens new window)

mergeCells.updatePlugin()

Updates the plugin's state.

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

• mergeCells