テーマ
- ExcelやGoogleスプレッドシートなど表形式のデータをいちいちCSVに変換して入出力するのはめんどくさい！
- ちょっとした表形式のデータならコピー&貼り付けで入出力できればよくない？
- ということで、表形式のデータをコピペで扱えるIFをReactで実装してみました
方法
- react-handsontableを使うと簡単に実装できます
- 公式：react-handsontable
-
HotTableコンポーネントのdataに配列で値を入力できます - 出力は
refを設定して参照することで値を取り出しています - 表示されている表よりも長いデータをコピペしても自動で伸びるので便利です。
- HandsontableというJavaScriptのライブラリを元にしているので、こちらのドキュメントを読むと詳しい使い方が書いてあります。
デモ
See the Pen react-handsontable DEMO by hiroki-ota (@mikan3rd) on CodePen.