Adding React component to Handsontable with latest @handsontable/react

Tags: #<Tag:0x00007efc6df45798>
#1

I use React/Django stack.

Yesterday, I found out the new version of handsontable/react was released few days ago. (https://github.com/handsontable/react-handsontable) I followed the instruction on (https://handsontable.com/docs/7.2.2/frameworks-wrapper-for-react-hot-column.html) and Now I’m getting following error

hotColumn.tsx:7 Uncaught TypeError: Cannot read property 'Component' of undefined
    at hotColumn.tsx:7
    at hotColumn.tsx:170
    at react-handsontable.min.js:27
    at react-handsontable.min.js:27

I installed

"@handsontable/react": "3.1.0",
"handsontable": "7.2.1",
"react": "16.10.2",
"react-dom": "16.8.6",
"react-scripts": "3.0.1"

added

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react/dist/react-handsontable.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

and my code looks like

import React from 'react';
import PropTypes from 'prop-types';
import Handsontable from "handsontable";
import { HotTable, HotColumn } from '@handsontable/react';

class HotTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hotData: Handsontable.helper.createSpreadsheetData(10, 10),
      secondColumnSettings: {
        title: "Second column header",
        readOnly: true
      }
    };
  }

  render() {
    return (
      <HotTable
        data={this.state.hotData}
        licenseKey="non-commercial-and-evaluation"
      >
        <HotColumn title="First column header" />
        <HotColumn settings={this.state.secondColumnSettings} />
      </HotTable>
    );
  }
}

Is there anything that I’m missing or any suggestion?

#2

Hi @george1

Can you share a demo where the issue can be replicable? What was your previous version of Handsontable?

#3

FYI: I didn’t really use @handsontable/react since React component was not supported until recent.

Sure, I will try to replicate it.

The thing is that the HotColumn was release with 3.1.0 as far as I know and it wasn’t really possible to add react component up until 3.1.0.

Is it possible that the package that you guys are using from (https://codesandbox.io/s/declaring-column-settings-hknvq?from-embed) could be a different version or pointed to something else than what it says on README.md file as below?

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react/dist/react-handsontable.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
#4

Hey @george1

The Handsontable for React wrapper does not change often. We had a release 8 days ago (3.1.0) and the last one was a couple of months before

Notes https://github.com/handsontable/react-handsontable/releases

If you wish to use Handsontable 7+ you need to work with wrapper v 3.0.0+

And yes, you are right that the introduction of HotColumn component was added only for v 3.1.0 (https://handsontable.com/docs/7.2.2/frameworks-wrapper-for-react-hot-column.html)

#5