文書の過去の版を表示しています。
HandsOnTable - スプレッドシート機能とルックアンドフィールを備えたデータグリッド
本家: Handsontable is a JavaScript data grid that looks and feels like a spreadsheet | Available for React, Angular and Vue
ソースコード: 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
詳しくは、README.md を参照のこと。
HandsOnTable の使い方
インスタンス生成時に最低限指定しなければならない項目
jsDelivr CDN を利用する
https://cdn.jsdelivr.net/npm/package[@version]/dist/file package=handsontable [version=9.0.0] file=handsontable.full.*
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">