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 (
<div className="App">
<div id="example-component">
<HotTable root="hot" data={this.handsontableData} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
</div>
</div>
);
}
}
export default App;

🐞 動作確認

yarn startでサーバを起動してhttp://0.0.0.0:3000にアクセスすると表示を確認できます。

😀 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)