====== HandsOnTable - スプレッドシート機能とルックアンドフィールを備えたデータグリッド ====== 本家: [[https://handsontable.com/|Handsontable is a JavaScript data grid that looks and feels like a spreadsheet | Available for React, Angular and Vue]]\\ ソースコード: [[git>handsontable/handsontable|GitHub - handsontable/handsontable: JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡]]\\ ===== インストール ===== jsDelivr CDN を利用する場合はインストールの必要はありません🥰\\ github より最新ソースを取得する。\\ $ git clone --depth 1 https://github.com/handsontable/handsontable.git Cloning into 'handsontable'... remote: Enumerating objects: 1721, done. remote: Counting objects: 100% (1721/1721), done. remote: Compressing objects: 100% (1412/1412), done. remote: Total 1721 (delta 382), reused 1006 (delta 249), pack-reused 0 Receiving objects: 100% (1721/1721), 5.52 MiB | 6.22 MiB/s, done. Resolving deltas: 100% (382/382), done. handsontable/dist ディレクトリに完全な配布物が含まれている。\\ $ cd handsontable/dist/ $ ll 合計 13220 -rw-r--r-- 1 tomoyan tomoyan 2509 5月 7 06:56 README.md drwxr-xr-x 1 tomoyan tomoyan 58 5月 7 06:56 dompurify -rw-r--r-- 1 tomoyan tomoyan 41087 5月 7 06:56 handsontable.css -rw-r--r-- 1 tomoyan tomoyan 51112 5月 7 06:56 handsontable.css.map -rw-r--r-- 1 tomoyan tomoyan 45611 5月 7 06:56 handsontable.full.css -rw-r--r-- 1 tomoyan tomoyan 3820842 5月 7 06:56 handsontable.full.js -rw-r--r-- 1 tomoyan tomoyan 35509 5月 7 06:56 handsontable.full.min.css -rw-r--r-- 1 tomoyan tomoyan 1298418 5月 7 06:56 handsontable.full.min.js -rw-r--r-- 1 tomoyan tomoyan 3088115 5月 7 06:56 handsontable.js -rw-r--r-- 1 tomoyan tomoyan 4118809 5月 7 06:56 handsontable.js.map -rw-r--r-- 1 tomoyan tomoyan 32117 5月 7 06:56 handsontable.min.css -rw-r--r-- 1 tomoyan tomoyan 985424 5月 7 06:56 handsontable.min.js drwxr-xr-x 1 tomoyan tomoyan 48 5月 7 06:56 hot-formula-parser drwxr-xr-x 1 tomoyan tomoyan 672 5月 7 06:56 languages drwxr-xr-x 1 tomoyan tomoyan 44 5月 7 06:56 moment drwxr-xr-x 1 tomoyan tomoyan 116 5月 7 06:56 numbro drwxr-xr-x 1 tomoyan tomoyan 56 5月 7 06:56 pikaday 詳しくは、[[https://github.com/handsontable/handsontable/tree/master/dist|README.md]] を参照のこと。\\ ===== HandsOnTable の使い方 ===== ==== インスタンス生成時に最低限指定しなければならない項目 ====
'use strict'; const hoTable = document.getElementById('hoTable'); new Handsontable(hoTable, { data: [ ['佐藤', 10], ['斎藤', 20], ['シュガーはホントに🐎の💩', 100] ], width: 300, height: 80, licenseKey: 'non-commercial-and-evaluation' }); ご参考: [[http://www.fstcon.jp/?p=34723|サトウ、サイトウ、馬のクソ | ファーストコンサルティング株式会社]]\\ ===== jsDelivr CDN を利用する ===== https://cdn.jsdelivr.net/npm/package[@version]/dist/file package=handsontable [version=9.0.0] file=handsontable.full.* ===== 参考文献 ===== [[qita>opengl-8080/items/ac19deec388c357cd498|Handsontable 使い方メモ１（基本） - Qiita]]\\ [[qita>yaju/items/c0307fa9ea69ad02c189|【Handsontable】導入と設定 - Qiita]]\\ [[https://handsontable.com/blog/articles/2016/3/a-complete-guide-to-changing-size-of-handsontable|A Complete Guide to Changing the Size of Handsontable]]\\