Handsontable example

by aszymanski

HTML

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

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

SCSS

.handsontable .lockedCell {
  background-color: rgb(155, 155, 155) !important;
}

Babel + JSX

import { HotTable } from "@handsontable/react";
import { registerAllModules } from "handsontable/registry";
import "handsontable/dist/handsontable.full.min.css";

registerAllModules();

export const ParentComponent = () => {
  const [show, setShow] = React.useState(true);
  const data = React.useMemo(() => {
    return Handsontable.helper.createSpreadsheetData(25, 5);
  }, []);

  return (
    <React.Fragment>
      <button onClick={() => setShow(!show)}>toggle</button>
      {show && <ExampleComponent data={data} />}
    </React.Fragment>
  );
};

export const ExampleComponent = ({data}) => {
  const hotRef = React.useRef(null);

  return (
    <React.Fragment>
      <HotTable
        id="hot"
        ref={hotRef}
        data={data}
        afterRender={function() {
        	 if (hotRef.current) {
           	hotRef.current.hotInstance.validateCells();
          }
        }}
        cells={function (row, col, prop) {
          let cellProperties = {};

          if (col === 1) {
            cellProperties.className = "lockedCell";
          }

          return cellProperties;
        }}
        colHeaders={true}
        afterSelection={function (row, column) {
          if (row === -1 || column === -1) {
            return;
          }
          if (hotRef.current != null) {
            console.log(hotRef.current.hotInstance.getCellMeta(row, column));
          }
        }}
        columns={[
          {
            title: "One",
            type: "text",
            wordWrap: false,
            readOnly: true,
          },
          {
            title: "Two",
            type: "text",
            wordWrap: false,
            readOnly: true,
          },
          {
            title: "Three",
            type: "dropdown",
            source: ["yellow", "red", "orange"],
            wordWrap: false,
          },
        ]}
        rowHeights={55}
        height="auto"
        licenseKey="non-commercial-and-evaluation"
      />
    </React.Fragment>
 ...