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にアクセスすると表示を確認できます。

🚜 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍