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

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

Web Components 階層データグリッドの例

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

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

依存関係

Web Components 階層グリッドを初期化するには、Ignite UI for Web Components パッケージをインストールする必要があります。

Web Components 階層グリッドのパッケージをインストールするときは、core パッケージもインストールする必要があります。

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-grids
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts

グリッドを使用するには、次のインポートも含める必要があります。

import 'igniteui-webcomponents-grids/grids/combined.js';

対応するスタイルも参照する必要があります。テーマの 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:

import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

またはそれをリンクするには:

<link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>

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

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

データバインディング

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

階層データの使用

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

export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

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

<igc-hierarchical-grid auto-generate="true">
    <igc-row-island child-data-key="Albums" auto-generate="true">
        <igc-row-island child-data-key="Songs" auto-generate="true">
        </igc-row-island>
    </igc-row-island>
    <igc-row-island child-data-key="Tours" auto-generate="true">
    </igc-row-island>
</igc-hierarchical-grid>

[!NOTE] data の代わりにユーザーは、データを自動的に設定するめの読み込みに igc-hierarchical-grid が必要な childDataKey のみ設定します。

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

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

<igc-hierarchical-grid id="hGrid" primary-key="customerId" auto-generate="true" height="600px" width="100%">
    <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId" auto-generate="true">
        <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId" auto-generate="true"></igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>

import { getData } from "./remoteService";

export class HierarchicalGridLoadOnDemand {
    constructor() {
        const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
        const ordersRowIsland = document.getElementById("ordersRowIsland");
        const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");

        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Customers");
        });
        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Orders");
        });

        hierarchicalGrid.isLoading = true;

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

    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
        const context = event.detail;
        const dataState = {
            key: context.owner.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();
        });
    }
}

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

export function getData(dataState: any): any {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

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

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

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

<igc-hierarchical-grid data="data" primary-key="ID" has-children-key="hasChildren">
</igc-hierarchical-grid>

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

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

機能

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

<igc-hierarchical-grid data="localData" auto-generate="false"
    allow-filtering='true' height="600px" width="800px">
    <igc-column field="ID" pinned="true" filterable="true"></igc-column>
    <igc-column-group header="Information">
        <igc-column field="ChildLevels"></igc-column>
        <igc-column field="ProductName" has-summary="true"></igc-column>
    </igc-column-group>
    <igc-row-island child-data-key="childData" auto-generate="false" row-selection="multiple">
        <igc-column field="ID" has-summary="true" data-type="number"></igc-column>
        <igc-column-group header="Information2">
            <igc-column field="ChildLevels"></igc-column>
            <igc-column field="ProductName"></igc-column>
        </igc-column-group>
        <igc-paginator per-page="5"></igc-paginator>
    </igc-row-island>
    <igc-paginator>
    </igc-paginator>
</igc-hierarchical-grid>

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

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

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

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

「すべて縮小」ボタン

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

スタイル設定

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

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

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

.grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

サンプル

既知の制限

制限	説明
グループ化	グループ化機能は、階層グリッドでサポートされません。

API リファレンス

HierarchicalGrid
RowIsland
IgcGridComponent
IgcColumn
IgcCell

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

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

Web Components 階層データ グリッドの例