Bootstrap Tabs

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@11/dist/handsontable.full.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#tab1" data-toggle="tab">Sheet 1</a></li>
  <li><a data-target="#tab2" data-toggle="tab">Sheet 2</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <div id="example1" class="hot handsontable htColumnHeaders">
    </div>
  </div>
  <div class="tab-pane" id="tab2">
    <div id="example2" class="hot handsontable htColumnHeaders">
    </div>
  </div>
</div>

JavaScript

jQuery(function() {
  jQuery('#myTab a:last').tab('show')
});


const hyperformulaInstance = HyperFormula.buildEmpty({
  // to use an external HyperFormula instance,
  // initialize it with the `'internal-use-in-handsontable'` license key
  licenseKey: 'internal-use-in-handsontable',
});

hyperformulaInstance.addSheet('Sheet1')
hyperformulaInstance.addSheet('Sheet2')

const data1 = [
  ['10.26', null, 'Sum', '=SUM(Sheet1!A1:Sheet1!A4)'],
  ['20.12', null, 'Average', '=AVERAGE(Sheet1!A1:Sheet1!A5)'],
  ['30.01', null, 'Median', '=MEDIAN(Sheet1!A1:Sheet1!A5)'],
  ['40.29', null, 'MAX', '=MAX(Sheet1!A1:Sheet1!A5)'],
  ['50.18', null, 'MIN', '=MIN(Sheet1!A1:Sheet1!A5)'],
  ['=Sheet2!A1'] //Sheet2 reference
];

const data2 = [
  ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,"TRUE","FALSE")'],
  ['Is A:A in Sheet > 150?', '=Sheet1!A3'],
  ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],
  ['Generate a random number', '=RAND()'],
  ['Number of sheets in this workbook', '=SHEETS()'],
];

var
  container = document.getElementById('example1'),
  container2 = document.getElementById('example2'),
  hot, hot2;

hot = new Handsontable(container, {
  data: data1, 
  minCols: 20,
  minRows: 30,
  colHeaders: true,
  formulas: {
    engine: hyperformulaInstance,
    sheetName: 'Sheet1',
  },
  licenseKey: 'non-commercial-and-evaluation'
});

hot2 = new Handsontable(container2, {
  data: data2,
  minCols: 20,
  minRows: 30,
  colHeaders: true,
   formulas: {
    engine: hyperformulaInstance,
    sheetName: 'Sheet2',
  },
  licenseKey: 'non-commercial-and-evaluation'
});


setTimeout(function(){
  hot.render();
	hot2.render()
}, 50)

document.querySelector('.nav-tabs').addEventListener('click', function(){
setTimeout(function(){
console.log('test');
	hot.render();
	hot2.render();
}, 30)
})