Handsontable example

by handsoncode

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
<button class="mer">get merged cells</button>

CSS

</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var
     container = document.getElementById('example1'),
     hot = new Handsontable(container, {
        data: Handsontable.helper.createSpreadsheetData(10, 10),
        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
           }
        ]
     });

  var plugin = hot.getPlugin('mergeCells');
  var cells = plugin.mergedCellsCollection.mergedCells;
  var mer = document.querySelector('.mer');
  mer.addEventListener('click', function() {
     console.log(cells)
  })