JSpreadsheet カラム設定Tips

JSpreadsheetを使えば、ExcelライクなUIでWeb上のスプレッドシートを実装できます。
今回は、その中でも重要な 「カラム設定（columns設定）」のポイントをまとめましたのでシェアします。

基本構造

JSpreadsheetでは、各カラムの設定は columnsプロパティで行います。

例）

jspreadsheet(document.getElementById(‘spreadsheet’), {
data: [],
columns: [
{ type: ‘text’, title: ‘Name’, width: 150 },
{ type: ‘numeric’, title: ‘Price’, width: 100 },
{ type: ‘calendar’, title: ‘Date’, width: 120 },
]
});

各カラムはオブジェクトで定義し、
type, title, width などを指定します。

よく使う type

type：text
説明：テキスト入力
主なオプション：readOnly

type：numeric
説明：数値入力
主なオプション：decimal

type：dropdown
説明：プルダウン選択
主なオプション：source, autocomplete

type：calendar
説明：日付入力（カレンダー）
主なオプション：format, type, readonly

type：checkbox
説明：チェックボックス
主なオプション：true, false

カレンダー（type: ‘calendar’）の使い方

JSpreadsheetではカレンダーの挙動を制御できます。

例：年月だけ選択（type: ‘month’）

{
type: ‘calendar’,
title: ‘Invoice Month’,
width: 120,
options: {
type: ‘month’,
format: ‘YYYY/MM’,
}
}

出力例： 2025/10

ポイント
カレンダーが「年月モード」で表示できる。
値は “2025-10-01” のように日付形式で保持される

通常の日付選択（type: ‘calendar’）
{
type: ‘calendar’,
title: ‘Invoice Date’,
width: 120,
options: {
format: ‘YYYY-MM-DD’,
}
}

出力例： 2025-10-15

dropdown（プルダウン選択）の設定例

{
type: ‘dropdown’,
title: ‘Currency’,
width: 100,
source: [‘JPY’, ‘USD’, ‘EUR’],
autocomplete: true,
}

選択候補を sourceに配列で指定します。
DBから取得したリストを渡すことも可能です。

数値カラム（numeric）

{
type: ‘numeric’,
title: ‘Amount’,
width: 100,
decimal: ‘.’, // 小数点区切り
mask: ‘#,##0.00’, // 表示フォーマット
}

出力例： 12,345.67

ポイント
maskで桁区切りや小数点表示を指定できる
decimalで小数点記号（. or ,）を変更可能です。

読み取り専用カラム


{
type: ‘text’,
title: ‘ID’,
width: 80,
readOnly: true,
}

背景がグレーになり、ユーザーは編集できません。

木曜日担当：nishida

このエントリーをはてなブックマークに追加


nishida at 2025年10月23日 10:00:00


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム


↑

↓