Jspreadsheet 使い方メモ２-3（グリッドのオプション）

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

「[Handsontable 使い方メモ２（グリッドのオプション）](https://qiita.com/opengl-8080/items/9d25e106ff48b66cb908)」と比較しながら書いていきます。

※全てのオプションは網羅していません。

全てのオプションを確認したい場合は、 [公式ドキュメント](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の`dataSchema`の機能に近いものは`columns`にあたる。

### `columns`を指定した場合

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

let data = [];
let table = new jspreadsheet(grid, {
  data: data,
  columns: [
    { name: 'name' },
    { name: 'age' }
  ]
});

data.push(
  { name: 'foo', age: 25 }
);

table.setData(data);

// 再描画
// table.updateTable();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/013264c6-f0fe-fea3-fe90-d789d80254b5.png)

* `columns` は、データが全く無い状態から新規にレコードを追加したときなどに必要になる
* setData(data) で行が追加された状態になる
* Handsontableの`dataSchema`の違い、再描画では追加したデータが表示されない

### １行目にデータが設定されている場合
```js
let grid = document.getElementById('grid');

let data = [{ name: 'foo', age: 17 }];
let table = new jspreadsheet(grid, {
  data: data
});

data.push(
  { name: 'boo', age: 15 }
);

table.setData(data);

// 再描画
// table.updateTable();
```
* １行目にすでにデータが設定されている場合は、そのデータの構造が `columns` として利用される
* setData(data) で行が追加された状態になる
* Handsontableの`dataSchema`の違い、再描画では追加したデータが表示されない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/ff235beb-8a62-e567-d51b-f30e79fc7a90.png)

## セルの選択可否を設定する
Handsontableにはあるが、Jspreadsheetには`disableVisualSelection`の有効/無効を制御する機能は提供されていません。

## Enter で次の行に移動する
`Enter`を入力すると次の行に移動します。
Handsontableにはあるが、Jspreadsheetには`enterBeginsEditing`の有効/無効を制御する機能は提供されていません。

### Handsontableとの違い
Handsontableでは、デフォルトで`Enter`を入力するとセルの編集が始まる

## Enter でセルを抜けたときの移動先を指定する
Handsontableにはあるが、Jspreadsheetには`enterMoves`のような機能は提供されていません。

* `Enter` でセルを抜ける時、デフォルトだと下のセルに移動する
  * `Shift + Enter` で上（逆）に移動する

## フィルハンドル
選択したセルの右下にカーソルをドラッグすることで、セルの内容を上下 or 左右にコピーできる。これを フィルハンドル と呼ぶ。
Handsontableの`fillHandle`の機能に近いものは`selectionCopy`にあたる。

## 列・行を固定する
Handsontableにはあるが、Jspreadsheetには`fixedColumnsLeft`, `fixedRowsTop`のような機能は提供されていません。

## 行・列をドラック＆ドロップで移動できるようにする
Handsontableの`manualColumnMove`の機能に近いものは`columnDrag`にあたる。デフォルトは`false`となっている。
Handsontableの`manualRowMove`の機能に近いものは`rowDrag`にあたる。デフォルトは`true`となっている。

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

let table = new jspreadsheet(grid, {
  data: [
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3]
  ],
  columnDrag: true,
  rowDrag: true
});
```
![columnDrag.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/322853a8-e288-e5b2-9649-6351db329dd2.gif)

* 列ヘッダーを表示させた状態で`columnDrag`を`true`にすると、ドラッグ＆ドロップで列を移動させられるようになる
* `rowDrag`を使えば、行の移動もできるようになる

## 行・列の幅をドラッグで変更できるようにする
Handsontableの`manualColumnResize`の機能に近いものは`columnResize`にあたる。デフォルトは`true`となっている。
Handsontableの`manualRowResize`の機能に近いものは`rowResize`にあたる。デフォルトは`true`となっている。

![columnResize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/dc6b8b79-a79d-4953-5d6d-2bf3950989d0.gif)

* 列ヘッダーを表示させた状態で`columnResize`を`true`にすると、ドラッグで列の幅を変更できるようになる
* `rowResize`を使えば行のサイズ変更もできるようになる

### Handsontableとの違い
ダブルクリックしても、セルの内容に合わせて幅を最小サイズにできない。

## 行・列の最大数を設定する
Handsontableにはあるが、Jspreadsheetには`maxCols`のような機能は提供されていません。
Handsontableにはあるが、Jspreadsheetには`maxRows`のような機能は提供されていません。

## 余白となる行・列の最小値を設定する
余白となる列'minSpareCols'を設定する。
余白となる行'minSpareRows'を設定する。

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

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

![minSpare.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/c22e8f64-9c91-25dd-8cb2-0916327c9b09.gif)

* 指定した数だけの空の行・列が余白として常に表示されるようになる

## 複数セル選択の可否
Handsontableにはあるが、Jspreadsheetには`multiSelect`の有効/無効を制御する機能は提供されていません。

## 表外をクリックしても選択状態を解除させない
Handsontableにはあるが、Jspreadsheetには`outsideClickDeselects`の有効/無効を制御する機能は提供されていません。

* 表外をクリックすると選択状態が解除される

## 貼付け時の動作を指定する
Handsontableにはあるが、Jspreadsheetには`pasteMode`のような`Ctrl + V`で貼り付けた時の動作を指定する機能は提供されていません。

* コピー中の内容でセルを上書きする

## 空セルの表示内容を指定する
Handsontableにはあるが、Jspreadsheetには`placeholder`のような機能は提供されていません。

## 初期データが与えられなかった場合の行と列の数を指定する
Handsontableの`startCols`と`startRows`の機能に近いものは`minDimensions`にあたる。

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

let data = [];
let table = new jspreadsheet(grid, {
  minDimensions: [2, 3]
});
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/61ed3de6-cd7b-95d0-2cd8-955e3e634003.png)

* Handsontableの`startCols`の機能に近いものは`minSpareCols`にあたるが、`startRows`の機能に近い`minSpareRows`は`data`がないと何も表示されない

## セルの幅を自動伸縮させる
Handsontableにはあるが、Jspreadsheetには`stretchH`のような機能は提供されていません。

## タブを入力したときの移動先を指定する
Handsontableにはあるが、Jspreadsheetには`tabMoves`のような機能は提供されていません。

## 固定サイズのグリッドを表示する
Handsontableの`width`の機能に近いものは`tableWidth`にあたる。
Handsontableの`height`の機能に近いものは`tableHeight`にあたる。

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

let table = new jspreadsheet(grid, {
  data: [
   [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
   [2, 3, 4],
   [3, 4, 5],
   [4, 5, 6],
   [5, 6, 7],
   [6, 7, 8],
   [7, 8, 9],
   [8, 9, 0],
   [9, 0, 1],
   [0, 1, 2]
  ],
  tableOverflow: true,
  tableWidth: '260px',
  tableHeight: '140px'
});
```

* `tableWidth` と `tableHeight` を設定すると、固定サイズのグリッドを表示させられる
* `tableOverflow` を `true` に指定する必要がある
* 指定する値は、`px` 等で指定する必要がある 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/52a0a012-1fdb-b925-602d-7f94d49c676d.png)

## セル内で折り返す
Handsontableの`wordWrap`と同じだが、初期値は`false`となっている。

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

let table = new jspreadsheet(grid, {
  data: [
    ['あいうえお', 'かきくけこさしすせそ'],
    ['やゆよ', 'たちつてと'],
  ],
  defaultColWidth: 100,
  wordWrap: true,
});
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/0cb28b62-23ed-c4d3-7819-9a5e21d7db5f.png)

* ALT+Enterでセル内改行を許可するかも兼ねている

## グリッド内を検索する
Handsontableの`search`と同じだが、機能は違う。
Handsontableと違い、Search用のテキストボックスが表示される。

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

let table = new jspreadsheet(grid, {
  data: [
    ['one', 'two', 'three'],
    ['four', 'five', 'six'],
    ['seven', 'eight', 'nine']
  ],
  search: true
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/a0bbc2bc-9138-ee55-e856-421b2e61d8d6.png)

### 検索結果
検索兄用の「T」が含まれる行のみ表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/4bd6872d-64ae-55ea-aee0-52f683599e0b.png)

### Handsontableと違い
* 検索で該当したセルは着色されません
* `table.search.query`メソッドはありません

## 前後の空白をトリムするか設定する
Handsontableにはあるが、Jspreadsheetには`trimWhitespace`のような機能は提供されていません。

# 最後に
Handsontableより機能が足りないが、その機能が必要となるかですね。