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

はじめに

これは、Jspreadsheet Advent Calendar 2024の19日目の記事となります。

「Handsontable 使い方メモ２（グリッドのオプション）」と比較しながら書いていきます。

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

全てのオプションを確認したい場合は、 公式ドキュメント を参照

オプションの記事は長かったため、分割することにしました。

オプション

新しい行を追加するときの定義を指定する

HandsontableのdataSchemaの機能に近いものはcolumnsにあたる。

columnsを指定した場合

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();

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

１行目にデータが設定されている場合

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の違い、再描画では追加したデータが表示されない

セルの選択可否を設定する

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となっている。

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をtrueにすると、ドラッグ＆ドロップで列を移動させられるようになる
• rowDragを使えば、行の移動もできるようになる

行・列の幅をドラッグで変更できるようにする

HandsontableのmanualColumnResizeの機能に近いものはcolumnResizeにあたる。デフォルトはtrueとなっている。
HandsontableのmanualRowResizeの機能に近いものはrowResizeにあたる。デフォルトはtrueとなっている。

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

Handsontableとの違い

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

行・列の最大数を設定する

Handsontableにはあるが、JspreadsheetにはmaxColsのような機能は提供されていません。
Handsontableにはあるが、JspreadsheetにはmaxRowsのような機能は提供されていません。

余白となる行・列の最小値を設定する

余白となる列'minSpareCols'を設定する。
余白となる行'minSpareRows'を設定する。

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

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

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

複数セル選択の可否

Handsontableにはあるが、JspreadsheetにはmultiSelectの有効/無効を制御する機能は提供されていません。

表外をクリックしても選択状態を解除させない

Handsontableにはあるが、JspreadsheetにはoutsideClickDeselectsの有効/無効を制御する機能は提供されていません。

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

最後に

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