はじめに
これは、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();
行ヘッダー名変更
行数が確定しているなら、関数によりカスタマイズが可能
['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のように表示有無の制御はなく、デフォルト表示される。
最後に
このオプションの元記事が長くて辛かったので、分割することにしました。