ユーザ用ツール

サイト用ツール


サイドバー

Top

検索タグ

変更履歴

メニュー


javascript:handsontable

HandsOnTable - スプレッドシート機能とルックアンドフィールを備えたデータグリッド

インストール

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 の使い方

インスタンス生成時に最低限指定しなければならない項目

<div id="hoTable">
</div>
'use strict';
const hoTable = document.getElementById('hoTable');
 
new Handsontable(hoTable, {
  data: [
    ['佐藤', 10],
    ['斎藤', 20],
    ['シュガーはホントに🐎の💩', 100]
  ],
  width: 300,
  height: 80,
  licenseKey: 'non-commercial-and-evaluation'
});

ご参考: サトウ、サイトウ、馬のクソ | ファーストコンサルティング株式会社

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">

参考文献

javascript/handsontable.txt · 最終更新: 2021/10/10 04:49 by ともやん