Reactでスプレッドシート風のコンテンツを扱う「react-handsontable」

React.jsでスプレッドシート(Excel)風の操作を再現できる「Handsontable」をReactでつかえるようにする「react-handsontable」の紹介です。

🐠 導入手順

yarn global add create-react-app

create-react-app handsontable_sample && cd handsontable_sample

😀 App.js

src/App.jsを次のように書き換えます。

import React, { Component } from 'react';
import './App.css';
import HotTable from 'react-handsontable';

class App extends Component {
  constructor(props) {
    super(props);
    this.handsontableData = [
      ["", "Ford", "Volvo", "Toyota", "Honda"],
      ["2016", 10, 11, 12, 13],
      ["2017", 20, 11, 14, 13],
      ["2018", 30, 15, 12, 13]
    ];
  }

  render() {
    return (
      "App">
        "example-component">
          "hot" data={this.handsontableData} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
        </div>
      div>
    );
  }
}

export default App;