Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/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.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

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

Babel + JSX

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import { createSpreadsheetData } from './helpers';
import React, {
  useState, useRef, useEffect, forwardRef, useImperativeHandle, useContext, useMemo,
} from 'react';
// register Handsontable's modules
registerAllModules();


let settings = {
data: [['', 'blue'], ['red', 'blue']],
colHeaders: true, 
rowHeaders: true,
contextMenu: true,
minRows: 10,
height: 'auto',
licenseKey: "non-commercial-and-evaluation",
cells:(row, col) => {
  if(row==0 || col == 0){
    return { 
      type: 'autocomplete', 
      async source(query, process) {
      let vendorListTimeOut;
      setTimeout(() => {process(['blue', 'red'])}, 5000);}
    };
  }}
}
const App = () => (<HotTable settings={settings} />);

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