React Hierarchical Grid の縮小可能な列グループの概要

React Hierarchical Grid の Ignite UI for React の縮小可能な列グループ機能を使用すると、IgrHierarchicalGrid 内の複数レベルのネストされた列と列グループをグループ化し、これらのグループを縮小したり展開したりしてデータの視覚化とナビゲーションを向上させるオプションを提供することで、それらを整理および管理できます。

React Hierarchical Grid の縮小可能な列グループの例

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/combined";
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

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

設定

IgrHierarchicalGrid および縮小可能な複数列ヘッダーを使用するには、まず以下のコマンドを入力して、Ignite UI for React をインストールする必要があります。

npm install igniteui-react-grids
cmd

Ignite UI for React については、はじめにトピックををご覧ください。

そのため、複数列ヘッダーのトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。

使用方法

縮小可能な列グループは複数列ヘッダー機能の一部で、列グループをより小さいデータセットに縮小/展開する方法を提供します。列グループが折りたたまれると、列のサブセットがエンドユーザーに表示され、グループの他の子列が非表示になります。縮小/展開された各列は、グリッドデータソースにバインドすることも、非バインドにして計算することもできます。

列グループを縮小可能なに定義するには、columnGroup の Collapsible プロパティを true に設定する必要があります。

visibleWhenCollapsed プロパティを少なくとも 2 つの子列に定義する必要があることに注意してください。グループが縮小されたときに少なくとも 1 列が表示され (visibleWhenCollapsed の設定が true)、グループが展開されたときは少なくとも 1 列が非表示になります (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

すべての子列に 3 つの状態があります。

親の展開状態に関係なく、常に表示できます。
親が縮小されているときに表示できます。
親が縮小されているときに非表示にできます。

縮小可能として指定された列グループの初期状態は Expanded が true に設定されていますが、false に設定することでこの動作を簡単に変更できます。

展開/縮小インジケーターテンプレート

IgrHierarchicalGrid のデフォルトの展開インジケーターは次のとおりです。

IgrHierarchicalGrid のデフォルトの縮小インジケーターは次のとおりです。

また、デフォルトの展開/縮小インジケーターを変更する必要がある場合は、これを実現するためのテンプレートオプションを提供します。

<IgrColumnGroup id="info" header="Customer Information" collapsible="true" collapsibleIndicatorTemplate={this.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>

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

注最初にグループを縮小するオプションは、非表示の列よりも優先されることに注意してください。 hidden プロパティを使用して列を非表示にすることを宣言し、同じ列を表示するグループが定義されている場合、列が表示されます。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。