福野泰介の一日一創

CSVデータを気軽に扱いたいところですが、Googleスプレッドシートではちょっと重い。そんな中マルチプラットフォームのCSVエディタ「CSV+」登場のニュース。 Electronで作られたオープンソースだったので、Node.jsでビルドして試してみて、テーブル編集コンポーネント「Handsontable」を発見。 でも、ちょっと動作が重く、最新版はオープンソースではなくなっていて気軽には使えなさそうだったので、別途作ってみたのが「input-tableタグ」です。

「input-table tag demo」
データの編集、行の追加、列の追加、選択、コピー、CSVからのインポート、エクスポートができます。（ペースト、アンドゥーは未対応）

ウェブアプリに組み込むときも簡単。下記のコードですぐ使えます。

<script type="module" src="https://code4fukui.github.io/input-table/input-table.js"></script> <input-table id="inputtable"></input-table><br> <textarea id="chk" style="width:70vw;height:7em;margin-top:1em">name,date,value abc,2021-06-19,100 def,2021-06-20,10 xyz,2021-07-01,5</textarea>

高専機構からの環境報告CSVオープンデータに加えて、高専プロコンの今年の予選通過者発表を非公式でCSVオープンデータ化しました。 csvbeautyで、政府の開発ガイドライン推奨の文字コードセット、JIS X 0213準拠の文字コードへ縮退しています（全角英数なし！）

<script type="module" src="https://code4fukui.github.io/input-table/input-table.js"></script> <input-table id="inputtable2" src="https://codeforkosen.github.io/kosen-opendata/data/procon/procon2021.csv"></input-table><br>

srcにCSVファイルのURLを指定するだけ簡単です(CORS対応が必要)

便利ですね、JavaScriptのESモジュール！

Code for FUKUI のオープンソースです。