業務の入力画面を、
ビルド無しでサッと。

TssGrid は ノービルド・依存ゼロ・日本語IMEに強い 軽量データグリッド。帳票・マスタ・勤怠・在庫の入力画面を、<script> タグ1本で Excel ライクに作れます。

動かしてみる ↓ GitHub で見る

0 依存ライブラリ 0 ビルド工程日本語 IME 堅牢 Excel コピペ / Undo 商用も無料（MIT）

Live Demo

このページ上で、本物が動きます

セルをクリックして編集・Tab/矢印で移動・右クリックで行操作。セル右下の■をドラッグすれば連続入力（フィル。数値は連番に、Alt を押しながらだと斜め＝矩形フィル）。Excel からの貼り付けや Ctrl+Z も効きます。

発注メモ.html

↑ これは画像ではありません。実際の TssGrid です（編集してみてください）。

方眼ガントを触る → 在庫管理アプリを触る → 実例35件を見る →

No Build

導入はコピペで完結

npm も webpack も要りません。CSS と JS を読み込んで、1つ呼ぶだけ。

<!-- ① 読み込む（CDN or 自前ホスト） -->
<link rel="stylesheet" href="tssgrid.css">
<script src="tssgrid.js"></script>

<!-- ② 置く -->
<div id="app"></div>

<!-- ③ 1行で起動 -->
<script>
  new TssGrid(document.getElementById('app'), {
    columns: [
      { data: 'name', title: '品名' },
      { data: 'qty',  title: '数量', type: 'number' },
    ],
    data: [{ name: 'コピー用紙 A4', qty: 5 }],
  });
</script>

Features

業務フォームに必要なものだけ、ちゃんと

高機能を盛るより、日本の業務入力で本当に効く機能を堅く。

あ

日本語IMEに強い

アクティブセルに本物の <input> を重ねる設計。変換確定の Enter を奪わない・composition を確実に拾う。

⌗

Excel 相互コピペ

範囲選択・コピー・貼り付けが Excel と往復可能。フィルハンドルで連続入力、Ctrl+Z で巻き戻し。

▦

セル結合・固定列

矩形のセル結合、行/列の固定、ネストヘッダ。帳票レイアウトをそのまま画面に。

▾

豊富なセル型

ドロップダウン・チェックボックス・日付/時刻・数値書式・入力検証。列定義に書くだけ。

⚲

非破壊フィルタ

元データを壊さず絞り込み。10万行クラスも「2表＋同期スクロール」で実用域。

🧩

薄いプラグイン

計算式・フリガナ自動入力・スパークライン・ヒートマップ等。コア無依存のまま拡張。

業務の入力画面を、ビルド無しでサッと。