Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@15.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.1/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.1/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@15.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot ht-theme-main " ></div>

Babel + JSX

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
import { useRef } from 'react';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const hotTableRef = useRef(null);
  
  const getColumnSummary = () => {
    return [
      {
        sourceColumn: 0,
        type: 'sum',
        reversedRowCoords: true,
        destinationRow: 0,
        destinationColumn: 0,
        // force this column summary to treat non-numeric values as numeric values
        forceNumeric: true,
      },
      {
        sourceColumn: 1,
        type: 'min',
        reversedRowCoords: true,
        destinationRow: 0,
        destinationColumn: 1,
      },
      {
        sourceColumn: 2,
        type: 'max',
        reversedRowCoords: true,
        destinationRow: 0,
        destinationColumn: 2,
      },
      {
        sourceColumn: 3,
        type: 'count',
        reversedRowCoords: true,
        destinationRow: 0,
        destinationColumn: 3,
      },
      {
        sourceColumn: 4,
        type: 'average',
        reversedRowCoords: true,
        destinationRow: 0,
        destinationColumn: 4,
      },
    ];
  };
  
  const applyNewChange = () => {
    const hot = hotTableRef.current?.hotInstance;
    const rows = [
      [1, 2, 3, 4, 5],
      [1, 2, 3, 4, 5], 
      [6, 7, 8, 9, 10], 
      [11, 12, 13, 14, 15], 
      [null]
    ];
    
    if (hot) {
      hot.updateSettings({
        data: rows,
        columnSummary: getColumnSummary()
      });
    }
  };
  
  return (
    <div>
      <button 
        onClick={() => applyNewChange()}
        className="p-2 mb-4 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Click to Update Data
      </button>
      
      <HotTable
        ref={hotTableRef}
        autoWrapRow={true}
        autoWrapCol={true}
       ...