React 그리드 열 선택 개요
Ignite UI for React의 React 그리드 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시할 수 있는 간단하고 Excel과 유사한 방법을 제공합니다. columnSelection
입력을 통해 활성화할 수 있습니다. 풍부한 API 덕분에 이 기능을 사용하면 선택 상태를 쉽게 조작하고 선택한 분수에서 데이터를 추출하고 데이터 분석 작업 및 시각화를 수행할 수 있습니다.
React Grid Column Selection Example
아래 샘플은 IgrGrid
의 열 선택 동작의 세 가지 유형을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.
* 연락처 제목, 도시 및 주소 열은 열 선택이 비활성화되어 있습니다.
Basic Usage
열 선택 기능은 다음을 통해 활성화할 수 있습니다. columnSelection
입력, 소요되는 GridSelectionMode
가치.
상호 작용
기본 선택 모드는 None
입니다. Single
또는 Multiple
으로 설정하면 표시된 모든 열을 selectable
있습니다. 즉, 열을 선택하려면 하나를 클릭하면 selected
로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.
[!Note] The Multi Column Headers feature does not reflect on the
selectable
input. TheColumnGroupComponent
isselectable
, if at least one of its children has the selection behavior enabled. In addition, the component is marked asselected
if all of itsselectable
descendants areselected
.
* 국가 정보 열 그룹에서는 도시 및 우편번호 열만 선택할 수 있습니다.
Keyboard Combinations
[!Note] The keyboard combinations are available only when the grid
columnSelection
input is set tomultiple
.
열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.
- 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
- 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.
API Manipulations
그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. selected
해당 설정을 통해 세터.
[!Note] The above statement also applies to the
ColumnGroupComponent
, except that when theselected
property is changed it changes the state of its descendants.
API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.
Styling
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 class
설정해야 합니다.
<IgrGrid className="grid"></IgrGrid>
그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
Demo
API References
열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.
IgrGrid
properties:
IgrColumn
properties:
columnGroup
properties:
IgrGrid
events:
OnColumnsSelectionChange
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.