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 = () => {
  const T1Obj = document.getElementById('T1');
  const T2Obj = document.getElementById('T2');
  const T3Obj = document.getElementById('T3');

  function getScroll(event) {
    let elem;
    if (event.type === 'scroll') {
      elem = (event.srcElement) ? event.srcElement : event.target;
      if (elem.id === 'T1') {
        T2Obj.scrollLeft = elem.scrollLeft;
        T3Obj.scrollLeft = elem.scrollLeft;
      } else if (elem.id === 'T2') {
        T1Obj.scrollLeft = elem.scrollLeft;
        T3Obj.scrollLeft = elem.scrollLeft;
      } else if (elem.id === 'T3') {
        T1Obj.scrollLeft = elem.scrollLeft;
        T2Obj.scrollLeft = elem.scrollLeft;
      }
    }
  }

  if (typeof addEventListener !== 'undefined') {
    T1Obj && T1Obj.addEventListener('scroll', getScroll);
    T2Obj && T2Obj.addEventListener('scroll', getScroll);
  } else...