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にはあるが、JspreadsheetにはpasteModeのようなCtrl + Vで貼り付けた時の動作を指定する機能は提供されていません。

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

空セルの表示内容を指定する

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

初期データが与えられなかった場合の行と列の数を指定する

HandsontableのstartColsとstartRowsの機能に近いものはminDimensionsにあたる。

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

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

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

セルの幅を自動伸縮させる

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

タブを入力したときの移動先を指定する

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

固定サイズのグリッドを表示する

Handsontableのwidthの機能に近いものはtableWidthにあたる。
Handsontableのheightの機能に近いものはtableHeightにあたる。

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 等で指定する必要がある

セル内で折り返す

HandsontableのwordWrapと同じだが、初期値はfalseとなっている。

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

let table = new jspreadsheet(grid, {
  data: [
    ['あいうえお', 'かきくけこさしすせそ'],
    ['やゆよ', 'たちつてと'],
  ],
  defaultColWidth: 100,
  wordWrap: true,
});

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

グリッド内を検索する

Handsontableのsearchと同じだが、機能は違う。
Handsontableと違い、Search用のテキストボックスが表示される。

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

let table = new jspreadsheet(grid, {
  data: [
    ['one', 'two', 'three'],
    ['four', 'five', 'six'],
    ['seven', 'eight', 'nine']
  ],
  search: true

検索結果

検索兄用の「T」が含まれる行のみ表示される

Handsontableと違い

• 検索で該当したセルは着色されません
• table.search.queryメソッドはありません

前後の空白をトリムするか設定する

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

最後に

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