はじめに

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

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

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

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

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

オプション

初期表示時のカラム幅を自動調整する

Handsontableにはあるが、JspreadsheetにはautoColumnSizeのような機能は提供されていません。
入力内容が下記の場合

A	B
あいうえお	かきくけこさしすせそ
やゆよ	たちつてと

defaultColWidth の初期値 50 になっているため、狭いです
Handsontableと違いwordWrapの初期値がfalseのため、幅に納まらない場合には折り返しされない

ChatGPTで生成したプログラムを動くように修正しました。
colAlignments: 'left'に設定しているため、ヘッダーとデータが左寄せになります。

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

let table = new jspreadsheet(grid, {
  data: [
    ['あいうえお', 'かきくけこさしすせそ'],
    ['やゆよ', 'たちつてと'],
  ],
  colAlignments: 'left',
  onload:function(event) {
    for (let i = 0; i < this.options.columns.length; i++) {
      adjustColumnWidth(this, i);
    }
  }
});

function adjustColumnWidth(instance, columnIndex) {
  let maxWidth = 50; // 最小幅
  for (let rowIndex = 0; rowIndex < instance.getData().length; rowIndex++) {
    const cell = instance.getCellFromCoords(columnIndex, rowIndex);
    if (cell) {
      const cellContent = cell.innerText || cell.textContent;
      const tempElement = document.createElement('div');
      tempElement.style.position = 'absolute';
      tempElement.style.visibility = 'hidden';
      tempElement.style.whiteSpace = 'nowrap';
      tempElement.textContent = cellContent;
      document.body.appendChild(tempElement);

      const contentWidth = tempElement.offsetWidth;
      maxWidth = Math.max(maxWidth, contentWidth + 10); // パディングを追加
      document.body.removeChild(tempElement);
    }
  }
  instance.setWidth(columnIndex, maxWidth);
}

列ヘッダーを表示する

HandsontableのcolHeadersの機能に近いものは columnsにあたる。
列ヘッダーは常に表示されます。
colAlignmentsを設定しない場合、ヘッダーとデータは中央寄せになります。

A, B と簡易なヘッダーが表示される

列ヘッダーを非表示にするにはCSSを使用します。

.jexcel thead {
  display: none;
}

title でカラムごとに設定する

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

let table = new jspreadsheet(grid, {
  data: [
    ['あいうえお', 'かきくけこ'],
    ['さしすせそ', 'たちつてと']
  ],
  columns: [
    { title: '列１'},
    { title: '列２'},
  ],
  defaultColWidth: 100
});

columnsのJSON配列内にtitleで列名を指定できる

列名を関数で処理して決定

Handsontableのcolumnsと違い、関数には対応していない。

columnsにJSON配列を関数で生成することは出来る。

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

let table = new jspreadsheet(grid, {
  data: [
    ['あいうえお', 'かきくけこ'],
    ['さしすせそ', 'たちつてと']
  ],
  columns:['列A', '列B'].map(title => ({ title })),
  defaultColWidth: 100
});

columns属性のtitleを関数で生成しただけです

行ヘッダーを表示する

HandsontableのrowsHeadersに該当するものはありません。
行ヘッダーは常に表示されます。

デフォルトは、1 始まりの連番が表示される

行ヘッダーを非表示にするにはCSSを使用します。

.jexcel colgroup col:first-child {
    width: 0 !important;
}

もしくは、hideIndex()を使用します。

table.hideIndex();

Hide row number column #288

行ヘッダー名変更

行数が確定しているなら、関数によりカスタマイズが可能

['a', 'b', 'c'].map((title, index) => {
    const targetCell = document.querySelector(`td[data-y="${index}"].jexcel_row`);
    if (targetCell) targetCell.textContent = title;
});

プラグイン

Pro v8以降なら行ヘッダー名変更プラグインがあります。
jSpreadsheet Plugin : Row Header rename

列幅を指定する

全ての列をまとめて設定する

HandsontableのcolWidthsの機能に近いものは defaultColWidthにあたる。

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

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

列ごとに指定する（配列指定）

HandsontableのcolWidthsと同じ

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

let table = new jspreadsheet(grid, {
  data: [
    ['あいうえお', 'かきくけこ'],
    ['さしすせそ', 'たちつてと']
  ],
  colWidths: [200, 50]
});

配列を渡せば、列ごとの幅を指定できる
Handsontableと違いwordWrapの初期値がfalseのため、幅に納まらない場合には折り返しされない

列ごとに指定する（関数指定）

HandsontableのcolWidthsと違い、関数には対応していない。

ソート

HandsontableのcolumnSortingと同じ

カラム名のクリックでソートできるようにする

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

let table = new jspreadsheet(grid, {
  data: [
    ['a', 'd'],
    ['b', 'c']
  ],
  defaultColWidth: 80,
  columnSorting: true
});

columnSorting に true を指定すれば、カラム名をダブルクリックすることでソートできるようになる
Handsontableと違い、デフォルトtrueでクリックではなくダブルクリックとなる、現在のソートの向きがデフォルト表示

ソートさせてから表示する

HandsontableのcolumnSorting.sortColumnのような制御はないです。

現在のソートの向きを表示する

カラム名の横に三角印で現在のソートの向きが表示される。上向きが昇順、下向きが降順
HandsontableのsortIndicatorのように表示有無の制御はなく、デフォルト表示される。

最後に

このオプションの元記事が長くて辛かったので、分割することにしました。