React グリッド セルのアクティブ化
Ignite UI for React Data Table / Data Grid は、グリッドのセルを介したキーボードナビゲーションを可能にするセルアクティベーション機能をサポートします。これは、グリッドの activationMode プロパティを Cell に設定することによってアクティブになります。
React グリッド セルのアクティブ化の例
Excel スタイルのナビゲーション
enterBehaviorAfterEdit プロパティは、編集モードで Enter キーが押された後、上、下、左、または右の次のセルに移動するようにグリッドを構成します。それ以外の場合は、グリッドの enterBehavior プロパティを使用して、編集モードではなく、上、下、左、または右に他のセルに移動できます。
キーボード ナビゲーション
グリッドの activationMode プロパティを Cell に設定すると、データ グリッド内のさまざまなキーボードナビゲーションオプションが有効になります。以下は、現在押下されているセルに対する各キーの押下/組み合わせとそれらが持つ効果についての説明です。
- ↑: 1 つ上のセルに移動します。
- ↓: 1 つ下のセルに移動します。
- ←: 現在の行でセルを 1 つ左に移動します。
- → 現在の行でセルを 1 つ右に移動します。
- Page Up: グリッドを 1 ビューポート ページ上にスクロールします。
- Page Down: グリッドを 1 ビューポート ページ下にスクロールします。
- Tab: アクティブ セルを右の以下のセルに移動するか、その行の最後のセルに達した場合、以下の行の一番左のセルに移動します。
- Shift + Tab: アクティブセルを左の以下のセルに移動するか、またはその行の最初のセルに達した場合、前の行の一番右のセルに移動します。
- Ctrl + ↑: 列の一番上のセルに移動します。
- Ctrl + ↓: 列の一番下のセルに移動します。
- Ctrl + ←: 列の一番左のセルに移動します。
- Ctrl + →: 列の一番右のセルに移動します。
- Ctrl + Home: グリッド内の左上のセルに移動します。
- Ctrl + End: グリッド内の右下のセルに移動します。