Handsontable example

by aszymanski

HTML

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

<!-- a root div in which the component is being rendered -->
<div id="example1"></div>

Babel + JSX

import { useRef, useEffect}  from "react";
import { HotTable } from "@handsontable/react";
import Handsontable from "handsontable";
import { createSpreadsheetData } from './helpers';

const hotSettings = {
  data: createSpreadsheetData(4, 4),
  colHeaders: true,
  height: "auto",
  licenseKey: "non-commercial-and-evaluation",
};

export const App = () => {
  const hotTableComponent = useRef(null);
  const swapHotData = () => {
    hotTableComponent.current.hotInstance.loadData([["new", "data"]]);
  };

  useEffect(() => {
    hotTableComponent.current.hotInstance.loadData([["lorem", "ipsum"]]);
  }, []);

  return (
    <div className="controls">
      <HotTable ref={hotTableComponent} settings={hotSettings} />
      <br />
      <button onClick={swapHotData}>Load new data!</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('example1'));