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://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/[email protected]/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

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

Babel + JSX

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

// register Handsontable's modules
registerAllModules();

import Handsontable from "handsontable";

class CustomTextEditor extends Handsontable.editors.TextEditor {
  open() {
    super.open();
    this.TEXTAREA.style.fontSize = "14px";
    this.TEXTAREA.style.color = `#263238`;
    this.TEXTAREA.style.fontStyle = "normal";
    this.TEXTAREA.style.fontFamily = "Inter";
  }

  close() {
    this.TEXTAREA.style.fontSize = "14px";
    super.close();
  }

  getValue() {
    return this.TEXTAREA.value;
  }

  setValue(value) {
    super.setValue(value);
  }

  focus() {
    this.TEXTAREA.style.color = "#263238";
    this.TEXTAREA.style.fontSize = "14px";
    this.TEXTAREA.style.fontStyle = "normal";
    this.TEXTAREA.style.fontFamily = "Inter";
    this.TEXTAREA.focus();
  }
}

export default CustomTextEditor;


const CustomTextRenderer = (props) => {
  const { value } = props;
  return <div>{value}</div>;
};


const fields= [
    {
      id: 9,
      name: "Name",
      description: null,
      options: null,
      type: "SHORT_TEXT",
      cellValueType: "string",
      dbFieldType: "TEXT",
      dbFieldName: "name_rCR7JKuJU7mwFSEoCtyVYK",
      createdTime: "2024-07-11T05:54:39.594Z",
      lastModifiedTime: "2024-07-11T05:54:39.594Z",
      deletedTime: null,
      tableMetaId: "clygutq6s00073f6638xcitwd",
      nodeId: null,
      order: 1,
    },
    {
      id: 10,
      name: "number test",
      description: null,
      options: {
        presets: "",
        description: "",
        defaultValue: "",
        allowFraction: false,
        allowNegative: false,
        decimalPlaces: "1 ($1.0)",
        decimalSeparator: "Local (1,000,000.00)",
        largeNumberAbbreviation: "None",
        showThousandsSeparators: false,
      },
      type: "NUMBER",
      cellValueType: "string",
    ...