Jspreadsheet 使い方メモ４-1（メソッド）

# はじめに
これは、[Jspreadsheet Advent Calendar 2024](https://qiita.com/advent-calendar/2024/jspreadsheet)の22日目の記事となります。

「[Handsontable 使い方メモ４（メソッド）](https://qiita.com/opengl-8080/items/e756af444147771fab18)」と比較しながら書いていきます。

※全てのメソッドは網羅していません。

全てのメソッドを確認したい場合は、 [公式ドキュメント](https://bossanova.uk/jspreadsheet/v4/docs/quick-reference) を参照

メソッドの記事は長かったため、分割することにしました。

## 注意
現時点(2025/03/09)では、Jspreadsheet CE Version 4 を対象としています。
Version 5 のリリースにより見直す予定です。

https://bossanova.uk/jspreadsheet/docs/upgrade-from-v4-to-v5

# メソッド
## 行・列を挿入・削除する
Handsontableの`alter`のように処理の種類を指定する機能はありません。

```js
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);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/3432837f-a041-36b7-56dd-e437cfcbcbad.png)

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

## 行・列を削除する

```js
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);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/e6b7e32f-2a37-631e-089b-0f32b5c82f37.png)

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

## グリッドをクリアする
Handsontableの`clear`のような機能はありませんが、初期化する方法はあります。

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

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

table.setData([[]]);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/a7c9f787-a972-8d37-fe15-f341cb679306.png)

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

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

## 列・行数を取得する
Handsontableの`countCols`の機能に近いものは、`table.headers.length`にあたる。
Handsontableの`countRows`の機能に近いものは、`table.options.data.length`にあたる。

```js
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}`);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/026cd51d-ed5f-3ef2-22e2-1b91678e304b.png)

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

## 空の行・列数を習得する
Handsontableの`countEmptyCols`,`countEmptyRows`のような機能はない。

## 色々な条件の行・列数を取得する
Handsontableの`count**Cols`,`count**Rows`のような機能はない。

## セルの選択状態を解除する
Handsontableの`deselectCell`の機能に近いものは、`resetSelection`にあたる。

```js
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`と同じ機能である。

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

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

table.destroy();
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/0f580a26-a272-50b6-ff6e-4de359aecf36.png)

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

## セルの情報を取得する
Handsontableの`getCellMeta`の機能に近いものは、`getCell`や`getCellFromCoords`にあたる。

```js
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));
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/4e18c8c3-e270-2c7f-48dc-ae16f3e68207.png)

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

## ヘッダー名を取得する
Handsontableの`getColHeader`の機能に近いものは、`getHeader`や`getHeaders`にあたる。

```js
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));
```

```js:実行結果
one, two, three, four, five
three
```

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

## 列・列の幅・高さを取得する
Handsontableの`getColWidth`の機能に近いものは、`getColWidth`にあたる。
Handsontableの`getRowHeight`の機能に近いものは、`getHeight`にあたる。

```js
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));
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/4213f9fb-149a-6dc8-63fa-05a6e5356dc3.png)