React Grid 셀 활성화

    The Ignite UI for React Data Table / Data Grid supports a cell activation feature that will enable keyboard navigation through the cells of the grid. This is activated by setting the activationMode property of the grid to Cell.

    React Grid Cell Activation Example

    Excel Style Navigation

    enterBehaviorAfterEdit property will configure the grid to navigate to the next cell up, down, left or right after the enter key is pressed in edit mode. Otherwise, the enterBehavior property of the grid can be used to navigate to other cells, while not in edit mode, up, down, left or right.

    Keyboard Navigation

    After setting the activationMode property of the grid to Cell, this will enable a range of keyboard navigation options in the data grid. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell:

    • ↑: 한 셀 위로 이동합니다.
    • ↓: 한 셀 아래로 이동합니다.
    • ←: 현재 행에서만 한 셀을 왼쪽으로 이동합니다.
    • →: 현재 행에서만 한 셀을 오른쪽으로 이동합니다.
    • PAGE UP: 그리드를 한 뷰포트 페이지 위로 스크롤합니다.
    • PAGE DOWN: 그리드를 한 뷰포트 페이지 아래로 스크롤합니다.
    • TAB: 활성 셀을 오른쪽의 다음 셀로 이동하거나, 해당 행의 마지막 셀에 도달하면 다음 행의 가장 왼쪽 셀로 이동합니다.
    • SHIFT + TAB: 활성 셀을 왼쪽의 다음 셀로 이동하거나, 해당 행의 첫 번째 셀에 도달하면 이전 행의 가장 오른쪽 셀로 이동합니다.
    • CTRL + ↑: 열의 맨 위 셀로 이동합니다.
    • CTRL + ↓: 열의 맨 아래 셀로 이동합니다.
    • CTRL + ←: 행의 가장 왼쪽 셀로 이동합니다.
    • CTRL + →: 행의 맨 오른쪽 셀로 이동합니다.
    • CTRL + HOME: 그리드의 왼쪽 상단 셀로 이동합니다.
    • CTRL + END: 격자의 오른쪽 아래 셀로 이동합니다.

    API References