React 그리드 선택

    Ignite UI for React 단일 또는 다중 행 및 셀 선택을 지원합니다.

    React Grid Selection Example

    개요

    React 데이터 그리드의 선택은 행 및 셀 수준에서 활성화되며 React 그리드의 selectionMode 옵션을 사용하여 구성할 수 있습니다. 이 속성에는 아래에 나열된 다섯 가지 옵션이 있습니다.

    • None: 선택이 활성화되지 않습니다.
    • SingleCell: 단일 셀 선택이 가능합니다.
    • SingleRow: 단일 행 선택이 활성화됩니다.
    • MultipleCell: 여러 셀을 선택할 수 있습니다.
    • MultipleRow: 여러 행을 선택할 수 있습니다.
    • RangeCell: 클릭 및 드래그를 통해 여러 셀 범위를 선택할 수 있습니다.

    selectionBehavior 기본값은 ModifierBased로, 한 번에 하나의 행이나 셀만 선택되고 항목을 다중 선택하려면 수정자 키(CTRL)가 필요합니다. selectionBehavior​ ​Toggle로 설정하면 한 번의 클릭으로만 여러 행이나 셀을 선택할 수 있습니다.

    MultipleRow 다음 기능이 포함되어 있습니다.

    • 행을 선택하려면 클릭하고 드래그하세요.
    • 여러 행을 선택하려면 Shift 키를 누른 채 클릭하세요.
    • 여러 행을 선택하려면 Shift 키를 누른 채 위쪽/아래쪽 화살표 키를 누르세요.

    스페이스바를 누르면 MultipleRow 또는 SingleRow 통해 활성 행 선택이 전환됩니다.

    Row Range Selection

    다음 예에서는 그리드의 모든 행을 선택하거나 선택 취소하는 방법을 보여줍니다. selectionMode MultipleRow로 설정되어야 합니다.

    API References