Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>


<div class="v"></div>
<div id="example1" class="hot "></div>

Babel + JSX

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

document.querySelector('.v').innerHTML = `Version: ${Handsontable.version}`

function allLogic() {
 // generate an array of arrays with dummy data
const data = new Array(4005) // number of rows
  .fill()
  .map((_, row) => new Array(50) // number of columns
    .fill()
    .map((_, column) => `${row}, ${column}`)
  );
  
  function generateMergeCells(n) {
    if (n < 1) {
      return [];
    }

    const mergeCells = [];

    for (let row = 0; row <= n; row++) {
      mergeCells.push({ row, col: 0, rowspan: 1, colspan: 50 });
    }

  return mergeCells;
}

const n = 4000; // Replace with your desired value of n
const result = generateMergeCells(n);
console.log(result);

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data,
  height: 600,
  colWidths: 47,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  mergeCells: result,
  licenseKey: 'non-commercial-and-evaluation'
});

}

measureExecutionTime();

async function measureExecutionTime() {
  const startTime = performance.now();
    console.log("Starting building Handsontable ...");

  await allLogic();

  const endTime = performance.now();
  const executionTime = endTime - startTime;
  console.log(`Function execution took ${executionTime/1000} seconds.`);
}