Handsontable - Incorrect value of the columnsRenderCalculator

by andrew_j

HTML

<h2>Handsontable - Incorrect value of the columnsRenderCalculator</h2>

<p>
To trigger the error, grab the horizontal scroll bar at the bottom of the table and repeatedly drag it fully from side to side.
<br/>
If you stop at the left you'll sometimes see the case where the columns are not rendered.
</p>

<div id="sheet"></div>

		<!-- Load Handsontable v8.1.0 -->
		<script src="https://cdn.jsdelivr.net/npm/handsontable@8.1.0/dist/handsontable.full.min.js" integrity="sha256-g9pORzLbbgXYGWw/dP/ZUbx93IxoAtQS9iF9zFZwUrM=" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@8.1.0/dist/handsontable.full.min.css" integrity="sha256-6DtubF3BgGQWQwxrHfJq5fpD1t9rDFfIFGfXkIMyAu0=" crossorigin="anonymous" media="screen">

CSS

body {
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

#sheet {
  overflow: hidden;
  width: 50vw;
  height: 50vh;
}

JavaScript

let hot;
let container = document.getElementById('sheet');

let numGroups = 10;
let numColsPerGroup = 9;
let columnsToHide = [0, 1, 2, 3, 4, 5, 6, 7, 8];
let columnDefs = new Array(numGroups * numColsPerGroup).fill({});
let nestedHeadersRow1 = [];
let nestedHeadersRow2 = [];
for (let i = 0; i < numGroups; i++) {
	let n = (i + 1).toString();
	nestedHeadersRow1.push({label: 'Group ' + (i + 1), colspan: numColsPerGroup});
  for (let j = 0; j < numColsPerGroup; j++) {
  	nestedHeadersRow2.push((i * numColsPerGroup + j));
  }
}

let data = [];
for (let i = 0; i < numGroups * numColsPerGroup; i++) {
	let row = [];
  for (let j = 0; j < 100; j++) {
		row.push('x');
  }
  data.push(row);
}
 
hot = new Handsontable(container, {
  rowHeaders: true,
  columns: columnDefs,
  hiddenColumns: { indicators: false, columns: columnsToHide },
  nestedHeaders: [nestedHeadersRow1, nestedHeadersRow2],
  data: data,
 	licenseKey: 'non-commercial-and-evaluation',
});