JavaScript Data Grid 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>
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:
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 then 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: