Hierarchical Data Grid (階層データ グリッド) の概要と構成

Ignite UI for React 階層データ グリッドは、階層表形式データの表示と操作に使用されます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイル フィルタリング、ソート、ページング、テンプレート化、列の移動、列のピン固定、Excel および CSV へのエクスポートなどの豊富な機能セットを提供します。階層グリッドは、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。

React 階層データ グリッドの例

この React グリッドの例では、ユーザーがデータの階層セットを視覚化し、セル テンプレートを使用して他の視覚的コンポーネントを追加する方法を確認できます。

Ignite UI for React 階層グリッドを使用した作業の開始

依存関係

React 階層グリッドを初期化するには、igniteui-react と igniteui-react-grids パッケージをインストールする必要があります。

また、階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります:

npm install --save igniteui-react
npm install --save igniteui-react-grids

階層グリッドの外観をカスタマイズする方法の詳細については、スタイル設定セクションを参照してください。

import 'igniteui-react-grids/grids/themes/light/bootstrap.css'

For more details on how to customize the appearance of the hierarchical grid, you may have a look at the styling section.

React 階層データ グリッドの使用

データ バインディング

IgrHierarchicalGrid は、IgrGrid から派生し、ほとんどの機能を共有します。主要な違いは階層で複数レベルを定義できることです。IgrRowIsland と呼ばれる IgrHierarchicalGrid の定義内の個別のタグで設定されます。IgrRowIsland コンポーネントは、特定レベルの各子グリッドの設定を定義します。レベルごとの複数行アイランドがサポートされます。 階層グリッドで 2 通りのデータ バインドがサポートされます。

階層データの使用

アプリケーションが階層データ全体をオブジェクトの子配列を参照するオブジェクトの配列として読み込む場合、階層グリッドを設定して読み込み、自動的にバインドすることができます。以下はプロパティ構造の階層データソースのプロパティの例です。

各 IgrRowIsland は、子データを保持するプロパティのキーを指定します。

<IgrHierarchicalGrid autoGenerate={true} data={singers}>
    <IgrRowIsland childDataKey="Albums" autoGenerate={true}>
        <IgrRowIsland childDataKey="Songs" autoGenerate={true}>
        </IgrRowIsland>
    </IgrRowIsland>
    <IgrRowIsland childDataKey="Tours" autoGenerate={true}>
    </IgrRowIsland>
</IgrHierarchicalGrid>

ロードオンデマンドの使用

ほとんどのアプリケーションがはじめに最小限のデータを読み込むようでざいんされているため、結果的に読み込み時間が短くなります。このような場合、IgrHierarchicalGrid を設定してユーザーが作成したサービスでデータのオンデマンド フィードを可能にします。

import { getData } from "./remoteService";

export default function Sample() {
  const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);

  const gridCreated = (event: IgrGridCreatedEventArgs, _parentKey: string) => {
    const context = event.detail;
    const rowIsland = context.owner;
    const dataState = {
      key: rowIsland.childDataKey,
      parentID: context.parentID,
      parentKey: _parentKey,
      rootLevel: false,
    };

    context.grid.isLoading = true;

    getData(dataState).then((data: any[]) => {
      context.grid.isLoading = false;
      context.grid.data = data;
      context.grid.markForCheck();
    });
  }

  useEffect(() => {
    hierarchicalGrid.current.isLoading = true;

    getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
      (data: any) => {
        hierarchicalGrid.current.isLoading = false;
        hierarchicalGrid.current.data = data;
        hierarchicalGrid.current.markForCheck();
      }
    );
  }, []);

  return (
    <IgrHierarchicalGrid
        ref={hierarchicalGrid}
        primaryKey="customerId"
        autoGenerate={true}
        height="600px"
        width="100%">
        <IgrRowIsland
        childDataKey="Orders"
        primaryKey="orderId"
                autoGenerate={true}
                onGridCreated={(e: IgrGridCreatedEventArgs) => gridCreated(e, "Customers")}>
        <IgrRowIsland
            childDataKey="Details"
            primaryKey="productId"
                        autoGenerate={true}
                        onGridCreated={(e: IgrGridCreatedEventArgs) => gridCreated(e, "Orders")}>
                    </IgrRowIsland>
        </IgrRowIsland>
    </IgrHierarchicalGrid>
  );
}

const URL = `https://data-northwind.indigo.design/`;

export async function getData(dataState: any): Promise<any> {
    const response = await fetch(buildUrl(dataState));
    const data = await response.json();
    return data;
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `$${qS}`;
}

行展開インジケーターの表示/非表示

行がその展開前に子を持つかどうかについての情報を提供する方法がある場合は、HasChildrenKey 入力プロパティを使用できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。

<IgrHierarchicalGrid data={data} primaryKey="ID" hasChildrenKey="hasChildren">
</IgrHierarchicalGrid>

HasChildrenKey プロパティを設定する必要はありません。指定しなかった場合は、各行に展開インジケーターが表示されます。

さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、ShowExpandAll プロパティを使用できます。 この UI は、パフォーマンス上の理由からデフォルトで無効になっているため、データが大きいグリッドやロードオンデマンドのグリッドで有効にすることはお勧めしません。

機能

グリッド機能を有効にして IgrRowIsland マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランド インスタンスでオプションを変更すると生成した各グリッドで変更されます。

<IgrHierarchicalGrid data={localData} autoGenerate={false}
    allowFiltering={true} height="600px" width="800px">
    <IgrColumn field="ID" pinned={true} filterable={true}></IgrColumn>
    <IgrColumnGroup header="Information">
        <IgrColumn field="ChildLevels"></IgrColumn>
        <IgrColumn field="ProductName" hasSummary={true}></IgrColumn>
    </IgrColumnGroup>
    <IgrRowIsland childDataKey="childData" autoGenerate={false} rowSelection="multiple">
        <IgrColumn field="ID" hasSummary={true} dataType="number"></IgrColumn>
        <IgrColumnGroup header="Information2">
            <IgrColumn field="ChildLevels"></IgrColumn>
            <IgrColumn field="ProductName"></IgrColumn>
        </IgrColumnGroup>
        <IgrPaginator perPage={5}></IgrPaginator>
    <IgrRowIsland>
    <IgrPaginator></IgrPaginator>
</IgrHierarchicalGrid>

以下のグリッド機能はグリッド レベルごとに動作するため、各グリッド インスタンスが残りのグリッドとは別に管理します。

• ソート
• フィルタリング
• ページング
• 複数列ヘッダー
• 非表示
• ピン固定
• 移動
• 集計
• 検索

選択とナビゲーション機能は、Hierarchical Grid 全体でグローバルに作用します。

• 選択 選択は、選択したセルを異なる 2 つの子グリッドで同時に表示することを許可しません。
• ナビゲーション ↑ + ↓ へ移動するときに next/prev 要素が子グリッドの場合、ナビゲーションが関連子グリッド内で継続され、関連セルが選択済みにマークされ、フォーカスされます。子セルが現在の表示ビューポート以外にある場合にビューへスクロールされるため、選択したセルが常に表示されます。

「すべて縮小」 ボタン

左上の角にある [すべて縮小] ボタンを押して階層グリッドで展開されてる行を縮小できます。更に他のグリッドを含む各子グリッドと階層グリッドにも同様のボタンがあり、階層の特定のグリッドのみ縮小することができます。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。ヘッダーの背景とテキストの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:

<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

次に、そのクラスの --header-background および --header-text-color CSS プロパティを設定します:

<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

サンプル

既知の制限

API リファレンス