目次
文書の過去の版を表示しています。
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 の使い方
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HandsOnTable サンプル</title> <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"> <style> #lblHOTblVer { vertical-align: bottom; } </style> </head> <body> <div id="grid"> </div> Handsontable Version: <label id="lblHOTblVer"></label> <script> 'use strict'; const grid = document.getElementById('grid'); const lblHOTblVer = document.getElementById('lblHOTblVer'); lblHOTblVer.innerText = Handsontable.version; new Handsontable(grid, { data: [ ['佐藤', 10], ['斎藤', 20], ['🐎の💩', 100] ], width: 150, height: 80, licenseKey: 'non-commercial-and-evaluation' }); </script> </body> </html>
インスタンス生成時に最低限指定しなければならない引数
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">