LoginSignup
8
6

More than 5 years have passed since last update.

@mikan3rdin株式会社ZENKIGEN

[React] CSVを使わずに表形式のデータを入出力する

Last updated at Posted at 2018-06-05

:star: テーマ

  • ExcelやGoogleスプレッドシートなど表形式のデータをいちいちCSVに変換して入出力するのはめんどくさい！
  • ちょっとした表形式のデータならコピー&貼り付けで入出力できればよくない？
  • ということで、表形式のデータをコピペで扱えるIFをReactで実装してみました

:star2: 方法

  • react-handsontableを使うと簡単に実装できます
  • 公式：react-handsontable
  • HotTableコンポーネントのdataに配列で値を入力できます
  • 出力はrefを設定して参照することで値を取り出しています
  • 表示されている表よりも長いデータをコピペしても自動で伸びるので便利です。
  • HandsontableというJavaScriptのライブラリを元にしているので、こちらのドキュメントを読むと詳しい使い方が書いてあります。

:pencil:　デモ

See the Pen react-handsontable DEMO by hiroki-ota (@mikan3rd) on CodePen.

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
6