React.js Excelライクなページを作成ができるreact-handsontableの使い方

npm install handsontable @handsontable/react

import React, { Component } from 'react';
import { HotTable } from '@handsontable/react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.data = [
      ['java', 'c', 'python', 'go', 'cobol', 'c#'],
      [9, 10, 11, 12, 7],
      [10, 20, 11, 14, 20, 'test'],
      [11, 30, 15, 12, 17],
      [12, 30, 15, 12, 7],
      [12, 30, 15, 12, 7],
      [12, 30, 15, 12, 7],
      [12, 30, 15, 12, 7],
    ];
  }

  render() {
    return (<HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" />);
  }
}

export default App;

<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">