Handsontable example

HTML

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

CSS

.controllers {
  width: 200px;
  float: left;
}
.controllers input[type=checkbox] {
  margin-left: 5px;
  margin-right: 5px;
}


</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/7.4.2/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@3.1.2/dist/react-handsontable.js"></script>

Babel + JSX

import React from 'react';
  import ReactDOM from 'react-dom';
  import { HotTable } from '@handsontable/react';
  import Handsontable from 'handsontable';
  
const handsontableData = Handsontable.helper.createSpreadsheetData(6, 50);
  const Table1 = () => (
   			 <div>
            <HotTable
              id="T1"
              data={handsontableData}
              colHeaders={true}
              rowHeaders={true}
              colWidths={[100]}
							height={200}
							width="100vw"
              />
          </div>
  )
	
	  const Table2 = () => (
   			 <div>
            <HotTable
              id="T2"
              data={handsontableData}
              colHeaders={true}
              rowHeaders={true}
              colWidths={[100]}
							height={200}
							width="100vw"
              />
          </div>
  )
	
	  const Table3 = () => (
   			 <div>
            <HotTable
              id="T3"
              data={handsontableData}
              colHeaders={true}
              rowHeaders={true}
              colWidths={[100]}
							height={200}
							width="100vw"
              />
          </div>
  )
	
  const App = () => {



    return (
        <div>
          <Table1 />
					<br />
          <Table2 />
					<br />
          <Table3 />
					<br />
        </div>
      );
  }
  
  ReactDOM.render(<App />, document.getElementById('example1'));
  
  const T1Obj = document.querySelector('#T1 .wtHolder');
  const T2Obj = document.querySelector('#T2 .wtHolder');
  const T3Obj = document.querySelector('#T3 .wtHolder');

function syncScroll (elements) {
	
  function getScrollPositions () {
  	return elements.map((el) => ({scrollLeft: el.scrollLeft, scrollTop: el.scrollTop}));
  } 
  
	let scrollPositions = getScrollPositions();
  
  elements.forEach((el) => el.addEventListener('scroll', () => {
    let currentPositions = getScrollPositions();

    for (let [i, position] of currentPositions.entries()) {
      for (let dim of ['scrollLeft', 'scrollTop']) {
      ...