React Grid 셀 활성화

    Ignite UI for React 데이터 테이블 / 데이터 그리드는 그리드의 셀 내에서 키보드로 탐색할 수 있는 셀 활성화 기능을 지원합니다. 이는 그리드의 속성을 로activationMode 설정Cell 하여 활성화됩니다.

    React Grid Cell Activation Example

    Excel Style Navigation

    enterBehaviorAfterEditProperty는 편집 모드에서 엔터 키를 눌렀을 때 그리드가 위, 아래, 왼쪽, 오른쪽 다음 셀로 이동하도록 설정합니다. 그렇지 않으면 그리드의 특성을 사용enterBehavior 해 편집 모드가 아닌 상태에서 위, 아래, 왼쪽, 오른쪽 등 다른 셀로 이동할 수 있습니다.

    Keyboard Navigation

    그리드의 속성을 로activationMode 설정Cell 한 후, 데이터 그리드에서 다양한 키보드 내비게이션 옵션이 활성화됩니다. 아래는 각 키 입력/조합과 현재 활성화된 셀에 대한 영향에 대한 설명입니다:

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

    API References