javascript:handsontable

目次

文書の過去の版を表示しています。

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 ⚡

インストール

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>
    new Handsontable(grid, {
      data: [
        ['佐藤', 10],
        ['斎藤', 20],
        ['🐎の💩', 100]
      ],
      width: 150,
      height: 80,
      licenseKey: 'non-commercial-and-evaluation'
    });

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

jsDelivr を利用する

https://cdn.jsdelivr.net/npm/package@version/dist/file
package=handsontable
version=8.4.0
file=handsontable.full.*
  <script src="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.css" rel="stylesheet">

参考文献

Handsontable 使い方メモ１（基本） - Qiita
【Handsontable】導入と設定 - Qiita

A Complete Guide to Changing the Size of Handsontable

  • javascript/handsontable.1623167010.txt.gz
  • 最終更新: 2021/06/09 00:43
  • by ともやん