← TssGrid 例一覧 / Examples

TssGrid 例一覧

動くサンプルをカテゴリ別に。各ページはそのまま編集して試せます（Excel からの貼り付けは http:// 推奨）。外部lib は外部ライブラリ（ExcelJS/PapaParse/Chart.js）を併用するサンプルです。

業務ショーケース（まず見るなら）

在庫管理 ★
ドロップダウン・計算列・チェック・休日カレンダー全部入りのミニアプリ
勤怠表 ★
入力フロー制御（Enter/Tabで入力セルだけ巡回）・隠しフィールドで土日色
方眼ガント ★
予定/実績2段バー・遅延・期間・進捗データバー・曜日土日色
請求書（インボイス） ★
条件付き合計(tss-sum)で金額列に整列・分類見出し(結合)・行コピー/切取り挿入・ページマタギ印刷
現金出納帳
「前の行＋増減」で縦に積む残高（縦方向の連鎖）
氏名→フリガナ自動入力
IMEの変換前かなを composition から拾う（辞書不要）
日本語IME体感デモ ★
「あ」と打って「あ」と出るか。よくある作り（左）と TssGrid（右）を打ち比べ

入力・セルタイプ

数値入力
全角→半角の自動正規化・不正値を赤くエラー化
セル内改行（複数行）
multiline:true で隠しテキストエリア編集・IME直打ちOK・改行保持・Enter挙動を選択
入力検証
型＋関数バリデータ・全エラー一覧パネル
休日カレンダー
会社の休日（JSON）対応の日付ピッカー
時刻ピッカー
時/分プルダウン（保存は24h HH:MM）
オートコンプリート
自由入力＋候補の絞り込み（取引先・商品名向け）
依存ドロップダウン
options を関数に＝行ごとにリスト差替え（都道府県→市区町村）
トグル（2択）
有効｜無効 をセグメントで表示・クリック切替
セル内計算式
=12*3+5 を確定時に計算（自前パーサ・CSP安全）
派生列（formula）
金額＝数量×単価 のような計算列を宣言的に
画像/SVG/HTMLセル
html:true で表示だけ生HTML（値はテキストのまま）
検証メッセージ管理
エラーメッセージのカタログをCSVから管理

表示・操作

並べ替え
ヘッダクリックで昇降（▲▼インジケータ）
多段ソート
ヘッダの▲▼で多段（sortByCols/onHeaderRender）＋本体クリックで列選択
ソート＋フィルタ両載せ
1ヘッダに ▲▼ソート と 漏斗フィルタ を右一列で共存（multisort＋tss-filter）
行固定
frozenRows。列固定と併用で四隅固定
ヘッダ結合
複数段の見出し（nestedHeaders）
セル結合
データセルの横/縦/矩形結合（右クリックで結合/解除）
条件付き書式
値/行を見て cellClass を付与・編集で即追従
ヒートマップ
連続色＋背景データバー（cellStyle）
セル内バー
数値を横棒で表示・バーのまま編集
スパークライン
セルにミニ折れ線/棒（SVG自前描画）
行ドラッグ移動
行頭のつまみで並べ替え（複数行まとめて可）
行削除アイコン
rowDelete で右端に🗑・1クリック削除（最後の1行は中身クリア）
セル内ボタン（状態で切替）
html:true＋format で行の状態別にボタン出し分け・click委譲＋redraw
行ごとのファイル添付
セルにボタン＋ドラッグ&ドロップで添付・行を特定して setValue

フィルタ・大規模ワークフロー

仮想スクロール
virtual:true で大量行を可視窓だけ描画＝10万行も初期描画一瞬
非破壊フィルタ（コア）
全行は保持し絞り込んだ部分集合だけ描画＝絞り込み後が軽い
フィルタUI
ヘッダの絞り込み（Excel風オートフィルタ・複数列AND）
フィルタ（旧サンプル）
setData差し替え方式の素朴版
同期スクロール
左右2表を並べて突き合わせ・連動スクロール
共有マスタ
1つのデータを複数グリッドで共有・編集が即反映

外部ライブラリ連携

グラフ連携 外部lib
Chart.js と連携（グリッド＝データ、グラフ＝ビュー）
Excel(xlsx)出力 外部lib
ExcelJS で書式付き出力（コア非搭載のサンプル）
Excel(xlsx)読込 外部lib
ExcelJS でデータ取り込み（生成→読込 round-trip）
CSV読込 外部lib
PapaParse で RFC4180 / Shift_JIS 対応の取り込み

比較・事例

機能比較
主要グリッド（Handsontable/AG Grid/jspreadsheet/SpreadJS）との立ち位置
導入事例 / Used by
TssGrid を使っている会社・ブランド（掲載は承認制）
← TssGrid メインサイト ／ GitHub
© 2026 株式会社スリースターソフトウェア（ThreeStarSoftware） · MIT License