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 from side to side.
</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 columnDefs = new Array(27).fill({});
let data = null;
 
hot = new Handsontable(container, {
  rowHeaders: true,
  columns: columnDefs,
  hiddenColumns: { indicators: false, columns: [0, 1, 2] },
  nestedHeaders: [
    	[
        {label: 'Group 1', colspan: 3},
        {label: 'Group 2', colspan: 3},
        {label: 'Group 3', colspan: 3},
        {label: 'Group 4', colspan: 3},
        {label: 'Group 5', colspan: 3},
        {label: 'Group 6', colspan: 3},
        {label: 'Group 7', colspan: 3},
        {label: 'Group 8', colspan: 3},
        {label: 'Group 9', colspan: 3}
      ],
    	['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA']
 		],
  minRows: 50,
 	licenseKey: 'non-commercial-and-evaluation',
});