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

🤔 参考リンク

📚 おすすめの書籍