Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@mikan3rd

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

More than 1 year has passed since last update.

: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.

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mikan3rd
zenkigen
「テクノロジーを通じて、人と企業が全機現できる社会の創出に貢献する」 『全機現』という言葉は、「人の持つ能力の全てを発揮する」という禅の言葉です。 多くの大人が全機現し、それを見た子供達が、大人になることに希望を持つ社会を次世代に引き渡したい。 その思いが当社の創業精神です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?