メソッド

行・列を挿入・削除する

Handsontableのalterのように処理の種類を指定する機能はありません。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3]
  ]
});

table.insertRow(1, 0);
let prop = [{title:'Available', width:80, type:'checkbox'}];
table.insertColumn(1, 2, 1, prop);

第一引数に、挿入する行（列）数を指定する
第二引数に、処理対象の行・列を指定するインデックスを渡す
第三引数に、0:before、1:after。デフォルトは 0
第四引数に、オブジェクト。insertColumnのみ

行・列を削除する

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3]
  ]
});

table.deleteRow(1, 0);
table.deleteColumn(1, 1);

第一引数に、削除する行（列）数を指定する
第二引数に、処理対象の行・列を指定するインデックスを渡す

グリッドをクリアする

Handsontableのclearのような機能はありませんが、初期化する方法はあります。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3]
  ]
});

table.setData([[]]);

グリッドの中身を全てクリアするが、行も消えてしまう

// 行数と列数を指定してクリアする
table.setData(Array.from({ length: 3 }, () => Array(3).fill('')));

列・行数を取得する

HandsontableのcountColsの機能に近いものは、table.headers.lengthにあたる。
HandsontableのcountRowsの機能に近いものは、table.options.data.lengthにあたる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    [1, 2],
    [1, 2],
    [1, 2]
  ]
});

let cols = table.headers.length;
let rows = table.options.data.length;

console.log(`cols=${cols}, rows=${rows}`);

table.headers.length で列数を、table.options.data.length で行数を取得できる

空の行・列数を習得する

HandsontableのcountEmptyCols,countEmptyRowsのような機能はない。

色々な条件の行・列数を取得する

Handsontableのcount**Cols,count**Rowsのような機能はない。

セルの選択状態を解除する

HandsontableのdeselectCellの機能に近いものは、resetSelectionにあたる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5]
});

table.updateSelectionFromCoords(2,2,3,3)

setTimeout(function() {
  table.resetSelection()
}, 2000);

表示後にセル選択も、約2秒後に resetSelection() が実行されて選択が解除される

グリッドを削除する

Handsontableのdestroyと同じ機能である。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5]
});

table.destroy();

グリッドが完全に削除される
グリッドの対象としていたタグ（#grid）は残る

セルの情報を取得する

HandsontableのgetCellMetaの機能に近いものは、getCellやgetCellFromCoordsにあたる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    { name: '佐藤 一郎', age: 25 },
    { name: '鈴木 二郎', age: 11 },
    { name: '田中 三郎', age: 21 }
  ],
  columns: [
    { title: '名前', name: 'name', type: 'text', align: 'left', width: 100 },
    { title: '年齢', name: 'age', type: 'numeric' },
  ]
});

console.log(table.getCell('A1'));
console.log(table.getCellFromCoords(1,0));

Handsontableと違い、セルの情報(DOMオブジェクト)を取得する
getCellはA1形式でセットする
getCellFromCoordsは位置(x,y)でセットする

ヘッダー名を取得する

HandsontableのgetColHeaderの機能に近いものは、getHeaderやgetHeadersにあたる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [[]],
  columns: ['one', 'two', 'three', 'four', 'five'].map(title => ({ title })) 
});

console.log(table.getHeaders());
console.log(table.getHeader(2));

実行結果

one, two, three, four, five
three

全ての列名は、getHeadersを使用する、Handsontableと違い配列ではない
列のインデックスを指定した場合、その列の名前が返される
Handsontableと違い、範囲外のインデックスは例外エラーとなる

列・列の幅・高さを取得する

HandsontableのgetColWidthの機能に近いものは、getColWidthにあたる。
HandsontableのgetRowHeightの機能に近いものは、getHeightにあたる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  minDimensions: [5,5],
  colWidths: [100, 120]
});

table.setHeight(0, 20);
table.setHeight(1, 80);

console.log(table.getWidth(0) + ', ' + table.getHeight(0));
console.log(table.getWidth(1) + ', ' + table.getHeight(1));

指定した要素が存在する座標を取得する

HandsontableのgetCoordsのような機能はない。