キーボード / タッチ操作
グリッド本体・編集エディタのキーバインド一覧と、スマホ / タブレットでのタッチ操作
グリッド本体フォーカス中(編集中でない)の操作一覧です。フィルター入力などのフォーム要素にフォーカスしている間は無効です。
グリッド本体
| キー | 操作 |
|---|---|
矢印(+ Shift で範囲拡張)/ Tab / Shift+Tab | アクティブセル移動(最終列の Tab / 先頭列の Shift+Tab はグリッド外の次 / 前の要素へフォーカスを移す) |
Enter / F2 / 印字キー直打ち | 編集開始(印字キーはその 1 文字を初期値に) |
Escape | 選択解除 |
Ctrl/Cmd+C | 選択範囲を TSV でコピー(isRowExportable 指定時は false の行を除く。改行入りセルは Excel と同じく "…" で囲む) |
Ctrl/Cmd+V | アクティブセル起点で貼り付け(readOnly では no-op。Excel / スプレッドシートのセル内改行や空行を含む範囲もそのまま貼れる) |
Ctrl/Cmd+A | 全体選択(2 回目で解除) |
Delete / Backspace | 選択セルの値クリア(編集不可セルは対象外) |
Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z / Ctrl/Cmd+Y | undo / redo |
編集エディタ内
| キー | 操作 |
|---|---|
Enter | 確定して下のセルへ(移動先は editorEnterMove で変更可) |
Tab / Shift+Tab | 確定して右 / 左のセルへ |
Escape | キャンセル |
| フォーカスアウト | 確定(select エディタのみキャンセル) |
確定 / キャンセルの後、Enter / Tab / Escape ではフォーカスがグリッドへ戻ります(imeDirectInput 有効時は入力受けへ)。フォーカスアウトで確定したときは、移り先がグリッド外の要素(グリッドの上のフォームの入力欄や上部バーのグローバルフィルターなど)ならそこにフォーカスを残し、グリッドへ奪い返しません。編集中にフォームの入力欄をクリックすると、セルの値を確定してそのまま入力欄へ打ち込めます。グリッド内の別のセルをクリックしたときや、フォーカスを取らない余白をクリックしたときはグリッドへ戻ります。編集中にグリッド内の別のセルをクリックすると、値を確定してクリックしたセルへ移ります(そのままドラッグすれば範囲選択、行・列ヘッダーなら行・列の選択になります)。
Enter 確定後の移動先は editorEnterMove prop で変更できます('down'(既定)/ 'up' / 'right' / 'left' / 'none'。Excel の「Enter キーを押したら、セルを移動する(方向)」相当。Tab / Shift+Tab には影響しません)。
確定後の移動先は「確定を反映した再レンダー後」の行数でクランプされます。onRowsChange で末尾に空行を追加する実装(Excel 的な入力グリッドの定石)では、最終行の Enter 確定でそのまま増えた行へ進めます。
IME(日本語入力)
IME 変換中(isComposing)の Enter / Escape / Tab は IME の操作としてのみ扱われ、セル編集の確定・キャンセルには使われません。変換確定の Enter でセルが誤確定することはありません。
IME オンのまま打ち始める(imeDirectInput)
既定では、編集していないセルで IME オンのまま日本語を打ち始めると、変換が始まらず最初の入力が失われます(F2 / Enter / ダブルクリックで編集を始めてからなら問題ありません)。imeDirectInput を付けると Excel / SPREAD と同じく、セルを選んだまま日本語を打ち始められます。
<SpreadsheetGrid rows={rows} columns={columns} onRowsChange={setRows} imeDirectInput />- セルを選んだ状態で日本語を打つと、変換中の文字がセルの上に表示されます。
- 変換を確定(
Enter)すると、確定した文字列で編集が始まります。続けて入力できます。 - もう一度
Enterでセルを確定して下へ移動します。
対象は text エディタと number エディタの編集可能セルです。number の列では、確定した全角の数字を半角に直して編集が始まります(「１２．５」→ 12.5。数値にならない変換は捨てます)。select / date などの列では従来どおり何も入りません。既定 OFF なのは、有効中はグリッドにフォーカスがあるあいだ document.activeElement が入力欄になり、入力欄では反応しないアプリのショートカットが効かなくなるためです。プレイグラウンドの imeDirectInput トグルで試せます。詳細は props を参照してください。
ラベル行(labelRow 有効時)
| キー | 操作 |
|---|---|
↑ / ↓ | ラベル行(見出し行)には止まらず、同じ向きの次のデータ行へ読み飛ばす |
| ペースト | ラベル行を飛ばして次のデータ行へ続けて貼り付ける(行は落ちない) |
グループ行(行グルーピング有効時)
| キー | 操作 |
|---|---|
Enter / Space | グループの開閉 |
スクリーンリーダー
表は WAI-ARIA の grid として公開しています。矢印キーでアクティブセルを動かすと、支援技術がそのセル(列見出し・行番号・値)を読み上げます。1 画面に複数のグリッドを置くときは ariaLabel で表に名前を付けてください。
<SpreadsheetGrid ariaLabel="受注一覧" rows={rows} columns={columns} />付けている役割と属性の一覧は API リファレンス を参照してください。
タッチ操作(スマホ / タブレット)
タッチ端末(pointerType === 'touch')では、ドラッグをブラウザのスクロールに譲る設計です。マウスの「押した瞬間に選択開始 → ドラッグで範囲拡張」は行わず、タップで確定します。
| 操作 | 動作 |
|---|---|
| セルをタップ | アクティブセル + 単一セル選択 |
| 同じセルを素早く 2 回タップ(300ms 以内) | 編集開始(ダブルクリック相当。dblclick を発火しないブラウザでも動作) |
| スワイプ | 縦横スクロール(範囲選択にはなりません) |
| 行番号をタップ | 行全体を選択(enableRowSelection 時はチェックボックス行選択) |
| 列ヘッダーをタップ | 列全体を選択 |
列ヘッダーの ⋮ をタップ | 列メニュー(フィルター / ソート / 固定 / 表示…)。タッチ端末では ⋮ を常時表示します |
補足:
- 範囲選択(複数セル)はタッチでは行えません。
Shift+タップのソートも修飾キーがないため対象外です(列メニューから操作してください)。 - 列幅の変更(境界の把手)/ 列の並べ替え(grip)はタッチでもドラッグできますが、把手が小さいため補助的な操作です。
- セルのコンテキストメニュー(右クリック)はタッチの長押しには対応していません(ブラウザが長押しを
contextmenuとして発火する環境では開きます)。 - グリッド root には
touch-action: manipulationを当てており、セル上のダブルタップがブラウザのズームに奪われません(パン / ピンチズームは有効のまま)。
試すにはセル編集とバリデーションやソートとフィルターのデモをどうぞ。