Handsontable example

HTML

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

<div id="example-data-grid" class="hot "></div>

Babel + JSX

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

const data = [
  ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],
  ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],
  ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],
  ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],
  ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],
  ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],
  ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],
  ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],
  ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],
  ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],
  ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],
  ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],
  ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],
];

const container = document.querySelector('#example-data-grid');
const hot = new Handsontable(container, {
  data: data,
  formulas: {
    engine: HyperFormula,
  },
  colHeaders: ['A', 'B', 'C', 'D', 'E'],

  stretchH: 'all',
  height: 500,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders:true,
       contextMenu:true,
      fixedRowsTop:"2",
      minRows:"400",
 
});