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

This page covers a non-latest version of Handsontable.

# MergeCells

# 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>

If set to true, it enables a possibility to merge cells. If set to an array of objects, it merges the cells provided in the objects (see the example below). More information on the demo page.

Default: false Example

// enables the mergeCells plugin
mergeCells: true,

// declares a list of merged sections
mergeCells: [
  // rowspan and colspan properties declare the width and height of a merged section in cells
  {row: 1, col: 1, rowspan: 3, colspan: 3},
  {row: 3, col: 4, rowspan: 2, colspan: 2},
  {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 state. This method is executed when Core#updateSettings is invoked.

Last Updated: Mar 27, 2024