React 계층형 그리드 열 선택 개요
Ignite UI for React의 React 계층적 그리드 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시할 수 있는 간단하고 Excel과 유사한 방법을 제공합니다. 를 통해 활성화할 수 있습니다. columnSelection 입력. 풍부한 API 덕분에 이 기능을 사용하면 선택 상태, 선택한 분획에서 데이터 추출, 데이터 분석 작업 및 시각화를 쉽게 조작할 수 있습니다.
React 계층형 그리드 열 선택 예제
아래 샘플은 세 가지 유형의 IgrHierarchicalGrid 열 선택 동작을 보여 줍니다. 아래의 열 선택 드롭다운을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.
* 사진 및 Debut 에는 열 선택이 비활성화되어 있습니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core";
import SingersData from './SingersData.json';
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
const mods: any[] = [
IgrPropertyEditorPanelModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this.propertyEditor = r;
this.setState({});
}
private columnSelectionEditor: IgrPropertyEditorPropertyDescription
private hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this.hierarchicalGrid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.propertyEditorRef = this.propertyEditorRef.bind(this);
this.hierarchicalGridRef = this.hierarchicalGridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="options vertical">
<IgrPropertyEditorPanel
ref={this.propertyEditorRef}
componentRenderer={this.renderer}
target={this.hierarchicalGrid}
descriptionType="WebHierarchicalGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
propertyPath="ColumnSelection"
name="columnSelectionEditor"
label="Column Selection">
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
</div>
<div className="container fill">
<IgrHierarchicalGrid
autoGenerate={false}
data={this.singersData}
ref={this.hierarchicalGridRef}
id="hierarchicalGrid"
primaryKey="ID"
allowFiltering={true}
columnSelection="single">
<IgrColumn
field="Artist"
header="Artist">
</IgrColumn>
<IgrColumn
field="Photo"
header="Photo"
dataType="image"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Debut"
header="Debut"
dataType="number"
selectable={false}>
</IgrColumn>
<IgrColumn
field="GrammyNominations"
header="Grammy Nominations">
</IgrColumn>
<IgrColumn
field="GrammyAwards"
header="Grammy Awards">
</IgrColumn>
<IgrRowIsland
childDataKey="Albums"
autoGenerate={false}
columnSelection="single">
<IgrColumn
field="Album"
header="Album">
</IgrColumn>
<IgrColumn
field="LaunchDate"
header="Launch Date"
dataType="date"
selectable={false}>
</IgrColumn>
<IgrColumn
field="BillboardReview"
header="Billboard Review">
</IgrColumn>
<IgrColumn
field="USBillboard200"
header="US Billboard 200">
</IgrColumn>
<IgrRowIsland
childDataKey="Songs"
autoGenerate={false}
columnSelection="single">
<IgrColumn
field="Number"
header="No.">
</IgrColumn>
<IgrColumn
field="Title"
header="Title">
</IgrColumn>
<IgrColumn
field="Released"
header="Released"
dataType="date"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Genre"
header="Genre">
</IgrColumn>
</IgrRowIsland>
</IgrRowIsland>
<IgrRowIsland
childDataKey="Tours"
autoGenerate={false}
columnSelection="single">
<IgrColumn
field="Tour"
header="Tour"
selectable={false}>
</IgrColumn>
<IgrColumn
field="StartedOn"
header="Started on"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Location"
header="Location"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Headliner"
header="Headliner">
</IgrColumn>
</IgrRowIsland>
</IgrHierarchicalGrid>
</div>
</div>
);
}
private _singersData: any[] = SingersData;
public get singersData(): any[] {
return this._singersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
기본 사용법
열 선택 기능은 다음을 통해 활성화할 수 있습니다. columnSelection 입력, 소요되는 GridSelectionMode 가치.
상호 작용
기본 선택 모드는 None 입니다. Single 또는 Multiple으로 설정하면 표시된 모든 열을 selectable 있습니다. 즉, 열을 선택하려면 하나를 클릭하면 selected로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.
다중 열 머리글 기능은 선택 가능한 입력에 반영되지 않습니다. ColumnGroupComponent는 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우 선택 가능합니다. 또한 선택 가능한 하위 항목이 모두 선택된 경우 구성 요소는 선택됨으로 표시됩니다.
* 위치 열 그룹 아래에서는 도시 열만 선택할 수 있습니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrHierarchicalGridModule, IgrColumnGroupModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumnGroup, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import HierarchicalCustomers from './HierarchicalCustomers.json';
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrHierarchicalGridModule,
IgrColumnGroupModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this.hierarchicalGrid = r;
this.setState({});
}
private columnGroup: IgrColumnGroup
private column: IgrColumn
private rowIsland: IgrRowIsland
constructor(props: any) {
super(props);
this.hierarchicalGridRef = this.hierarchicalGridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrHierarchicalGrid
data={this.hierarchicalCustomers}
columnSelection="multiple">
<IgrColumnGroup
header="General Information">
<IgrColumn
field="Company"
header="Company">
</IgrColumn>
<IgrColumnGroup
header="Personal Details">
<IgrColumn
field="ContactName"
header="Name">
</IgrColumn>
<IgrColumn
field="ContactTitle"
header="Title">
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrColumnGroup
header="Address Information">
<IgrColumnGroup
header="Location">
<IgrColumn
field="Address"
header="Address"
selectable={false}>
</IgrColumn>
<IgrColumn
field="City"
header="City">
</IgrColumn>
<IgrColumn
field="PostalCode"
header="Postal Code"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Country"
header="Country"
selectable={false}>
</IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup
header="Contact Information">
<IgrColumn
field="Phone">
</IgrColumn>
<IgrColumn
field="Fax">
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrRowIsland
childDataKey="Orders"
autoGenerate={false}
columnSelection="multiple">
<IgrColumnGroup
header="Order Information">
<IgrColumnGroup
header="Order Details">
<IgrColumn
field="OrderID">
</IgrColumn>
<IgrColumn
field="EmployeeID">
</IgrColumn>
<IgrColumn
field="OrderDate"
dataType="date">
</IgrColumn>
<IgrColumn
field="RequiredDate"
dataType="date">
</IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup
header="General Shipping Information">
<IgrColumn
field="ShippedDate"
dataType="date">
</IgrColumn>
<IgrColumn
field="ShipVia"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Freight"
selectable={false}>
</IgrColumn>
<IgrColumn
field="ShipName">
</IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup
header="Shipping Location">
<IgrColumn
field="ShipAddress">
</IgrColumn>
<IgrColumn
field="ShipCity">
</IgrColumn>
<IgrColumn
field="ShipPostalCode">
</IgrColumn>
<IgrColumn
field="ShipCountry">
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrRowIsland
childDataKey="OrderDetails"
autoGenerate={false}
columnSelection="single">
<IgrColumn
field="ProductID">
</IgrColumn>
<IgrColumn
field="UnitPrice">
</IgrColumn>
<IgrColumn
field="Quantity"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Discount">
</IgrColumn>
</IgrRowIsland>
</IgrRowIsland>
</IgrHierarchicalGrid>
</div>
</div>
);
}
private _hierarchicalCustomers: any[] = HierarchicalCustomers;
public get hierarchicalCustomers(): any[] {
return this._hierarchicalCustomers;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
키보드 조합
키보드 조합은 그리드 열 선택 입력이 다중으로 설정된 경우에만 사용할 수 있습니다.
열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.
- 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
- 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.
API 조작
그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. selected 해당 설정을 통해 세터.
위 명령문은 선택한 속성이 변경될 때 해당 하위 항목의 상태가 변경된다는 점을 제외하고 ColumnGroupComponent에도 적용됩니다.
API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.
스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 class 설정해야 합니다.
<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>
tsx그런 다음 관련 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;
}
css데모
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import SingersData from './SingersData.json';
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrHierarchicalGrid
private gridRef(r: IgrHierarchicalGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrHierarchicalGrid
autoGenerate={false}
data={this.singersData}
ref={this.gridRef}
id="grid"
primaryKey="ID"
allowFiltering={true}
columnSelection="single">
<IgrColumn
field="Artist"
header="Artist">
</IgrColumn>
<IgrColumn
field="Photo"
header="Photo"
dataType="image"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Debut"
header="Debut"
dataType="number"
selectable={false}>
</IgrColumn>
<IgrColumn
field="GrammyNominations"
header="Grammy Nominations">
</IgrColumn>
<IgrColumn
field="GrammyAwards"
header="Grammy Awards">
</IgrColumn>
<IgrRowIsland
childDataKey="Albums"
autoGenerate={false}
columnSelection="multiple">
<IgrColumn
field="Album"
header="Album">
</IgrColumn>
<IgrColumn
field="LaunchDate"
header="Launch Date"
dataType="date"
selectable={false}>
</IgrColumn>
<IgrColumn
field="BillboardReview"
header="Billboard Review">
</IgrColumn>
<IgrColumn
field="USBillboard200"
header="US Billboard 200">
</IgrColumn>
<IgrRowIsland
childDataKey="Songs"
autoGenerate={false}
columnSelection="multiple">
<IgrColumn
field="Number"
header="No.">
</IgrColumn>
<IgrColumn
field="Title"
header="Title">
</IgrColumn>
<IgrColumn
field="Released"
header="Released"
dataType="date"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Genre"
header="Genre">
</IgrColumn>
</IgrRowIsland>
</IgrRowIsland>
<IgrRowIsland
childDataKey="Tours"
autoGenerate={false}
columnSelection="single">
<IgrColumn
field="Tour"
header="Tour"
selectable={false}>
</IgrColumn>
<IgrColumn
field="StartedOn"
header="Started on"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Location"
header="Location"
selectable={false}>
</IgrColumn>
<IgrColumn
field="Headliner"
header="Headliner">
</IgrColumn>
</IgrRowIsland>
</IgrHierarchicalGrid>
</div>
</div>
);
}
private _singersData: any[] = SingersData;
public get singersData(): any[] {
return this._singersData;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#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;
}
css
API 참조
열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.
IgrHierarchicalGrid properties:
IgrColumn properties:
columnGroup properties:
IgrHierarchicalGrid events:
OnColumnsSelectionChange
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.