Ativação de células React Grid
O Ignite UI for React Data Table / Data Grid suporta um recurso de ativação de célula que permitirá a navegação pelo teclado através das células da grade. Isso é ativado definindo a propriedade activationMode da grade como Cell.
React Grid Cell Activation Example
Excel Style Navigation
A propriedade enterBehaviorAfterEdit configurará a grade para navegar para a próxima célula para cima, para baixo, para a esquerda ou para a direita após a tecla enter ser pressionada no modo de edição. Caso contrário, a propriedade enterBehavior da grade pode ser usada para navegar para outras células, enquanto não estiver no modo de edição, para cima, para baixo, para a esquerda ou para a direita.
Keyboard Navigation
Após definir a propriedade activationMode da grade para Cell, isso habilitará uma gama de opções de navegação por teclado na grade de dados. Abaixo está uma descrição de cada um dos pressionamentos de tecla/combinações e o efeito que eles terão em relação à célula atualmente ativada:
- ↑: Navegar uma célula para cima.
- ↓: Navegar uma célula para baixo.
- ←: Navega uma célula para a esquerda somente na linha atual.
- →: Navega uma célula para a direita somente na linha atual.
- Page Up: Rola a grade uma página de visualização para cima.
- Page Down: Rola a grade uma página de visualização para baixo.
- Tab: move a célula ativa para a próxima célula à direita, ou para a célula mais à esquerda da próxima linha, se a última célula dessa linha for alcançada.
- Shift + Tab: move a célula ativa para a próxima célula à esquerda, ou para a célula mais à direita da linha anterior, se a primeira célula dessa linha for alcançada.
- Ctrl + ↑: Mover para a célula superior da coluna.
- Ctrl + ↓: Move para a célula inferior da coluna.
- Ctrl + ←: Mover para a célula mais à esquerda na linha.
- Ctrl + →: Mover para a célula mais à direita na linha.
- Ctrl + Home: Mover para a célula superior esquerda na grade.
- Ctrl + End: Mover para a célula inferior direita na grade.