React 계층형 그리드 축소형 열 그룹 개요

React Hierarchical Grid의 Ignite UI for React Collapsible Column Groups 기능을 사용하면 IgrHierarchicalGrid에서 중첩된 여러 수준의 열과 열 그룹을 구성하고 관리할 수 있습니다. 이를 위해 그룹을 그룹화하고 이러한 그룹을 축소하거나 확장하여 데이터 시각화와 탐색을 개선하는 옵션을 제공합니다.

React 계층형 그리드 축소형 열 그룹 예제

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumnGroup, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import HierarchicalCustomersData from './HierarchicalCustomersData.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.hierarchicalCustomersData}
                    ref={this.gridRef}
                    id="grid"
                    primaryKey="CustomerID">
                    <IgrColumnGroup
                        header="General Information"
                        collapsible={true}>
                        <IgrColumn
                            field="ContactName"
                            header="Contact Name"
                            visibleWhenCollapsed={true}>
                        </IgrColumn>
                        <IgrColumn
                            field="ContactTitle"
                            header="Contact Title"
                            visibleWhenCollapsed={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="CustomerID"
                            header="Customer ID"
                            visibleWhenCollapsed={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="Company"
                            header="Company Name"
                            visibleWhenCollapsed={false}>
                        </IgrColumn>
                        <IgrColumnGroup
                            header="Address Information"
                            collapsible={true}>
                            <IgrColumnGroup
                                header="Location"
                                width="250px"
                                visibleWhenCollapsed={true}>
                                <IgrColumn
                                    field="Country"
                                    header="Country"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                                <IgrColumn
                                    field="City"
                                    header="City"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                                <IgrColumn
                                    field="Address"
                                    header="Address"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                                <IgrColumn
                                    field="PostalCode"
                                    header="Postal Code"
                                    visibleWhenCollapsed={true}>
                                </IgrColumn>
                            </IgrColumnGroup>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                    <IgrRowIsland
                        childDataKey="Orders"
                        autoGenerate={false}>
                        <IgrColumnGroup
                            header="Order Details"
                            collapsible={true}>
                            <IgrColumn
                                field="OrderID"
                                header="Order ID"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="EmployeeID"
                                header="Employee ID"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="OrderDate"
                                header="Order Date"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="RequiredDate"
                                header="Required Date"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="General Shipping Information"
                            collapsible={true}>
                            <IgrColumn
                                field="ShippedDate"
                                header="Shipped Date"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipVia"
                                header="Ship Via"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Freight"
                                header="Freight"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipName"
                                header="Ship Name"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="Shipping Location"
                            collapsible={true}>
                            <IgrColumn
                                field="ShipAddress"
                                header="Ship Address"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipCity"
                                header="Ship City"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipPostalCode"
                                header="Ship Postal Code"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="ShipCountry"
                                header="Ship Country"
                                visibleWhenCollapsed={true}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrRowIsland
                            childDataKey="OrderDetails"
                            autoGenerate={false}>
                            <IgrColumn
                                field="ProductID"
                                header="Product ID"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="UnitPrice"
                                header="Unit Price"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Quantity"
                                header="Quantity"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                            <IgrColumn
                                field="Discount"
                                header="Discount"
                                dataType="string"
                                resizable={true}>
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

    private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
    public get hierarchicalCustomersData(): any[] {
        return this._hierarchicalCustomersData;
    }

}

// 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

설정

를 시작하려면 IgrHierarchicalGrid 그리고 축소 가능한 다중 열 머리글 기능을 사용하려면 먼저 다음 명령을 입력하여 Ignite UI for React 설치해야 합니다.

npm install igniteui-react-grids
cmd

Ignite UI for React에 대한 전체적인 소개를 보려면 시작하기 항목을 읽어보세요.

또한 그리드에서 열 그룹을 설정하는 방법에 대한 자세한 내용을 보려면 다중 열 헤더 항목을 간략하게 살펴보는 것이 좋습니다.

용법

축소 가능한 열 그룹은 열 그룹을 더 작은 데이터 세트로 축소/확장하는 방법을 제공하는 다중 열 헤더 기능의 일부입니다. 열 그룹이 축소되면 열의 하위 집합이 최종 사용자에게 표시되고 그룹의 다른 하위 열은 숨겨집니다. 축소/확장된 각 열은 그리드 데이터 소스에 바인딩되거나 바인딩 해제되어 계산될 수 있습니다.

열 그룹을 축소 가능한 것으로 정의하려면 collapsible 속성을 columnGroup 받는 사람 참.

최소한 두 개의 하위 열에 visibleWhenCollapsed 속성을 정의해야 합니다. 그룹이 축소될 때(visibleWhenCollapsed true로 설정됨) 하나 이상의 열이 표시되어야 하고, 그룹이 확장될 때(visibleWhenCollapsed false로 설정됨) 하나 이상의 열이 숨겨져야 합니다. 그렇지 않으면 축소 가능한 기능이 비활성화됩니다. 일부 하위 열에 visibleWhenCollapsed 지정되지 않은 경우 상위 상태가 확장되거나 축소되었는지 여부에 관계없이 이 열이 항상 표시됩니다.

아래 마크업을 살펴보겠습니다.

<IgrColumnGroup collapsible={true} header="Customer Information">
    <IgrColumn field="CustomerName" header="Customer Name" visibleWhenCollapsed={true}>
    </IgrColumn>
    <IgrColumn field="CustomerID" header="Customer ID" visibleWhenCollapsed={false}>
    </IgrColumn>
    <IgrColumn field="CustomerFirstName" header="First Name" visibleWhenCollapsed={false}>
    </IgrColumn>
    <IgrColumn field="CustomerLastName" header="Last Name" visibleWhenCollapsed={false}>
    </IgrColumn>
    <IgrColumnGroup header="Customer Address">
        <IgrColumn field="CustomerAddress"  header="Full Address" width="250px" visibleWhenCollapsed={true}>
        </IgrColumn>
        <IgrColumn field="Address" visibleWhenCollapsed={false}>
        </IgrColumn>
        <IgrColumn  field="City" visibleWhenCollapsed={false}>
        </IgrColumn>
        <IgrColumn field="Country" visibleWhenCollapsed={false}>
        </IgrColumn>
        <IgrColumn field="PostalCode" header="Postal Code" visibleWhenCollapsed={false}>
        </IgrColumn>
    </IgrColumnGroup>
</IgrColumnGroup>
tsx

요약하면 모든 하위 열에는 세 가지 상태가 있습니다.

상위 항목의 확장 상태에 관계없이 항상 표시될 수 있습니다.
상위 항목이 축소되면 표시될 수 있습니다.
상위 항목이 축소되면 숨길 수 있습니다.

축소 가능으로 지정된 열 그룹의 초기 상태는 다음과 같습니다. expanded로 설정 진실로 설정하여 이 동작을 쉽게 변경할 수 있습니다. 거짓.

확장/축소 표시기 템플릿

에 대한 기본 확장 표시기는 다음과 같습니다. IgrHierarchicalGrid

에 대한 기본 축소 표시기는 다음과 같습니다. IgrHierarchicalGrid

또한 기본 확장/축소 표시기를 변경해야 하는 경우 이를 달성하기 위해 템플릿 옵션을 제공합니다.

<IgrColumnGroup id="info" header="Customer Information" collapsible={true} collapsibleIndicatorTemplate={collapsibleIndicatorTemplate}>
    <IgrColumn field="CustomerName" header="Fullname" dataType="string" visibleWhenCollapsed={true}></IgrColumn>
    <IgrColumn field="CustomerID" header="Customer ID" dataType="string" visibleWhenCollapsed={false}></IgrColumn>
    <IgrColumnGroup id="address" header="Customer Address" collapsible={true}>
        <IgrColumn field="Country" header="Country" dataType="string" sortable={true} visibleWhenCollapsed={true}></IgrColumn>
        <IgrColumn field="City" header="City" dataType="string" sortable={true} visibleWhenCollapsed={false}></IgrColumn>
    </IgrColumnGroup>
</IgrColumnGroup>

const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
    return (
    <div>
        <IgrIcon iconName={ctx.column.expanded ? 'remove' : 'add'}></IgrIcon>
    </div>)
}
tsx

참고 초기에 그룹 축소 옵션은 열 숨김보다 우선합니다. 숨김 속성을 사용하여 열을 숨기도록 선언하고 동일한 열이 표시되어야 하는 그룹을 정의한 경우 해당 열이 표시됩니다.

API 참조

추가 리소스

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.