はじめに

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

「[Handsontable 使い方メモ３（カラム・セルオプション）](https://qiita.com/opengl-8080/items/ccf5cbccd0ceb0a6bb47」と比較しながら書いていきます。

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

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

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

カラムオプション

基本

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

let table = new jspreadsheet(grid, {
  data: [{}],
  columns: [
    { 
      type: `text` 
    }
  ]
});

カラムのオプション指定は、columnsに配列を渡し、列番号に対応する要素にオブジェクトを渡すことで設定する

`type`：カラムの型を指定する

`text`：テキスト

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

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

デフォルトはtext
文字列入力になる
基本、何でも入力可能
文字は自動で中央寄せになる(Handsontableは左寄せ)

`numeric`：数値

フォーマットや国際化（例：金額やカンマ区切り）が必要な場合は、numericを選ぶのが適切です。単純なフォーマットなら、numberを使用する。
但し、formatを指定する必要がある。

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

let table = new jspreadsheet(grid, {
  data: [[]],
  columns: [
    { 
      type: 'numeric',
      format: '0'
    }
  ]
});

数値の入力のみ可になる
数値以外を入力できない
文字は自動で中央寄せになる(Pro版は右寄せになる)
0のみ入力する場合、別数値を入力してから0を入力する(Pro版は改善済み)

フォーマットする

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

let table = new jspreadsheet(grid, {
  data: [[]],
  columns: [
    { 
      type: 'number',
      format: '#,##0;[Red](#,##0)'
    }
  ]
});

format でフォーマットを指定できる
公式のフォーマットが使える

0
0.00
0%
0.00%
#,##0
#,##0.00
#,##0;(#,##0)
#,##0;[Red](#,##0)
#,##0.00;(#,##0.00)
#,##0.00;[Red](#,##0.00)

`checkbox`：チェックボックス

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

let table = new jspreadsheet(grid, {
  data: [
    [true],
    [false],
    [true]
  ],
  columns: [
    { 
      type: 'checkbox'
    }
  ]
});

checkboxでチェックボックスになる
trueでチェックがオンになり、falseでオフになる

オン・オフの値を変更する

HandsontableのcheckedTemplateとuncheckedTemplateのような機能はない。

ラベルを表示する

Handsontableのlabelを表示する機能はない。

`dropdown`：ドロップダウン

ブラウザ画面が狭い(800px未満)場合では項目選択画面は別画面になるが、広い場合はセル項目内で選択できる。

基本

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

let table = new jspreadsheet(grid, {
  data: [[]],　
  columns: [
    { 
      type: 'dropdown',
      source: ['one', 'two', 'three', 'four', 'five'],
      multiple: true
    }
  ]
});

ブラウザ画面が広い(800px以上)場合

複数選択

複数選択を可能にするには、multipleにtrueを指定する。

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

let table = new jspreadsheet(grid, {
  data: [[]],　
  columns: [
    { 
      type: 'dropdown',
      source: ['one', 'two', 'three', 'four', 'five']
    }
  ]
});

ブラウザ画面が広い(800px以上)場合

`autocomplete`：オートコンプリート

autocomplete は、dropdown と違い、項目を検索できる。
ブラウザ画面が狭い(800px未満)場合では項目選択画面は別画面になるが、広い場合はセル項目内で選択できる。

基本

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

let table = new jspreadsheet(grid, {
  data: [[]],　
  columns: [
    { 
      type: 'autocomplete',
      source: ['one', 'two', 'three', 'four', 'five']
    }
  ]
});

ブラウザ画面が狭い(800px未満)場合

typeをautocompleteにしてsourceを指定すると、オートコンプリートが表示されるようになる
候補の検索は、部分一致で行われる
sourceで定義した値以外は入力できない

複数選択

複数選択を可能にするには、multipleにtrueを指定する。

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

let table = new jspreadsheet(grid, {
  data: [[]],
  columns: [
    { 
      type: 'autocomplete',
      source: ['one', 'two', 'three', 'four', 'five'],
      multiple: true       
    }
  ]
});

セミコロン(delimiterの初期値)区切りで複数の値をセットできる

Handsontableとの違い

下記の機能はない

strict：入力できる値を制限する
allowInvalid：入力できる値を完全に制限する
sourceに関数を指定する
filter：候補を絞りこまないようにする

`password`：パスワード

Handsontableのpasswordのような機能はない。

`calendar`：日付

Handsontableのdateの機能に近いものはcalendarにあたる。

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

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

calendar にすると日付入力になる
セルの編集を開始すると、カレンダーが表示される

`format`：日付書式を指定する

HandsontableのdateFormatの機能に近いものはformatにあたる。

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

let table = new jspreadsheet(grid, {
  data: [[]],
  columns: [
    { 
      type: 'calendar',
      options: {
        format: 'YYYY-MM-DD',
        months:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        weekdays:['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], 
        weekdays_short: ['日', '月', '火', '水', '木', '金', '土'],
      }
    }
  ]
});

options.formatで日付書式を指定できる

Handsontableとの違い

下記の機能はない

defaultDate：初期値を指定する
datePickerConfig：細かい動作を調整する