Handsontable example

by mikkosk

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.0/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div style="height: 200px">
  <div id="example3"></div>
</div>

<div class="controls">
  <p>Try to copy this text</p>
  <p>
  And copy it here
  </p>
  <input />
</div>

Babel + JSX

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example3');
const copyBtn = document.querySelector('#copy');
const cutBtn = document.querySelector('#cut');

const hot = new Handsontable(container, {
  rowHeaders: true,
  colHeaders: true,
  data: [
    ['A1', 'B1', 'C1', 'D1', 'E1'],
    ['A2', 'B2', 'C2', 'D2', 'E2'],
    ['A3', 'B3', 'C3', 'D3', 'E3'],
    ['A4', 'B4', 'C4', 'D4', 'E4'],
    ['A5', 'B5', 'C5', 'D5', 'E5'],
  ],
  licenseKey: 'non-commercial-and-evaluation',
  outsideClickDeselects: true,
  height: '100%',
});