JavaScript Data Grid Merge cells

Table of contents

• Overview
• How to merge cells
• Related keyboard shortcuts
• Related API reference

Overview

The merging cells feature enables you to combine the contents of two or more cells to create a new larger cell that spans several columns. Particularly useful when you have data that's length is greater than the width of the column. For example, a license id that's length is so long that it needs more than one column width to view it in its entirety.

How to merge cells

To enable the merge cells feature, set the mergeCells option to true or to an array.

To initialize Handsontable with predefined merged cells, provide merged cells details in form of an array:

mergeCells: [{ row: 1, col: 1, rowspan: 2, colspan: 2 }]

const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(100, 50), height: 320, colWidths: 47, rowHeaders: true, colHeaders: true, contextMenu: true, mergeCells: [ { row: 1, col: 1, rowspan: 3, colspan: 3 }, { row: 3, col: 4, rowspan: 2, colspan: 2 }, { row: 5, col: 6, rowspan: 3, colspan: 3 } ], licenseKey: 'non-commercial-and-evaluation' }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(100, 50),
  height: 320,
  colWidths: 47,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  mergeCells: [
    { row: 1, col: 1, rowspan: 3, colspan: 3 },
    { row: 3, col: 4, rowspan: 2, colspan: 2 },
    { row: 5, col: 6, rowspan: 3, colspan: 3 }
  ],
  licenseKey: 'non-commercial-and-evaluation'
});

Related keyboard shortcuts

Windows	macOS	Action	Excel	Sheets
Ctrl + M	Ctrl + M	Merge or unmerge the selected cells	✗	✗

Related API reference

• Configuration options:
  • mergeCells
• Hooks:
  • afterMergeCells
  • afterUnmergeCells
  • beforeMergeCells
  • beforeUnmergeCells
• Plugins:
  • MergeCells