Web Components ツリー グリッドの概要と構成

Ignite UI for Web Components ツリー グリッドは、階層データまたはフラット データを簡単に表示および操作できます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイル フィルタリング、ソート、ページング、テンプレート、列移動などの豊富な機能を提供します。マテリアル テーブルをベースとした UI ツリー グリッドにより、表形式のデータの表示がさらに簡単できれいになりました。

Web Components ツリー グリッドの例

この例では、ユーザーが階層データまたはフラット データを操作する方法を確認できます。フィルタリングとソートのオプション、ピン固定と非表示、行の選択、Excel と csv へのエクスポートが含まれています。

例

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesNestedDataItem {
    public constructor(init: Partial<EmployeesNestedDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public Name: string;
    public Title: string;
    public Employees: EmployeesNestedDataItem_EmployeesItem[];

}
export class EmployeesNestedDataItem_EmployeesItem {
    public constructor(init: Partial<EmployeesNestedDataItem_EmployeesItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Title: string;

}
export class EmployeesNestedData extends Array<EmployeesNestedDataItem> {
    public constructor(items: Array<EmployeesNestedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesNestedDataItem(
                {
                    ID: 1,
                    Age: 55,
                    Salary: 80000,
                    Productivity: 90,
                    City: `Berlin`,
                    Country: `Germany`,
                    Phone: `609-202-505`,
                    HireDate: `2008-03-20`,
                    Name: `John Winchester`,
                    Title: `Development Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 4,
                    Age: 42,
                    Salary: 90000,
                    Productivity: 80,
                    City: `Kielce`,
                    Country: `Poland`,
                    Phone: `609-202-505`,
                    HireDate: `2014-01-22`,
                    Name: `Ana Sanders`,
                    Title: `CEO`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 44,
                            Salary: 80000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-202-505`,
                            HireDate: `2014-04-04`,
                            ID: 14,
                            Name: `Laurence Johnson`,
                            Title: `Director`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 25,
                            Salary: 85000,
                            Productivity: 55,
                            City: `Paris`,
                            Country: `France`,
                            Phone: `609-202-505`,
                            HireDate: `2017-11-09`,
                            ID: 5,
                            Name: `Elizabeth Richards`,
                            Title: `Vice President`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 39,
                            Salary: 88000,
                            Productivity: 88,
                            City: `London`,
                            Country: `UK`,
                            Phone: `609-202-505`,
                            HireDate: `2010-03-22`,
                            ID: 13,
                            Name: `Trevor Ashworth`,
                            Title: `Director`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 18,
                    Age: 49,
                    Salary: 77000,
                    Productivity: 70,
                    City: `Manchester`,
                    Country: `UK`,
                    Phone: `222-555-577`,
                    HireDate: `2014-01-22`,
                    Name: `Victoria Lincoln`,
                    Title: `Senior Accountant`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 23,
                            Name: `Thomas Burke`,
                            Title: `Senior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 22,
                            Name: `Michael Anderson`,
                            Title: `Junior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 21,
                            Name: `Roland Reyes`,
                            Title: `Accountant Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 24,
                            Name: `Monica Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 61,
                    Salary: 85000,
                    Productivity: 890,
                    City: `Lyon`,
                    Country: `France`,
                    Phone: `259-266-887`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Localization Developer`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 35,
                    Age: 35,
                    Salary: 75000,
                    Productivity: 75,
                    City: `Warasw`,
                    Country: `Poland`,
                    Phone: `688-244-844`,
                    HireDate: `2014-01-22`,
                    Name: `Janine Munoz`,
                    Title: `HR`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 49,
                    Salary: 95000,
                    Productivity: 80,
                    City: `Krakow`,
                    Country: `Poland`,
                    Phone: `677-266-555`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Sales Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcGridToolbarTitleComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";



ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private treeGrid: IgcTreeGridComponent
    private employees: IgcGridToolbarTitleComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        var employees = this.employees = document.getElementById('Employees') as IgcGridToolbarTitleComponent;

        this._bind = () => {
            treeGrid.data = this.employeesNestedData;
        }
        this._bind();
    }

    private _employeesNestedData: EmployeesNestedData = null;
    public get employeesNestedData(): EmployeesNestedData {
        if (this._employeesNestedData == null)
        {
            this._employeesNestedData = new EmployeesNestedData();
        }
        return this._employeesNestedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
            WebPaginatorDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        child-data-key="Employees"
        row-selection="multiple"
        moving="true"
        allow-filtering="true"
        filter-mode="excelStyleFilter">
            <igc-paginator
            >
            </igc-paginator>
            <igc-grid-toolbar
            >
                <igc-grid-toolbar-title
                name="Employees"
                id="Employees">
                </igc-grid-toolbar-title>
                <igc-grid-toolbar-actions
                >
                    <igc-grid-toolbar-hiding
                    >
                    </igc-grid-toolbar-hiding>
                    <igc-grid-toolbar-pinning
                    >
                    </igc-grid-toolbar-pinning>
                    <igc-grid-toolbar-exporter
                    export-csv="true"
                    export-excel="true">
                    </igc-grid-toolbar-exporter>
                </igc-grid-toolbar-actions>
            </igc-grid-toolbar>
            <igc-column
            field="Name"
            header="Name"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true"
            has-summary="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            header="Age"
            data-type="number"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

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

Ignite UI for Web Components Tree Grid で作業を開始

依存関係

Web Components ツリー グリッドを初期化するには、igniteui-webcomponents-grids パッケージをインストールする必要があります。

npm install --save igniteui-webcomponents-grids
cmd

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

import 'igniteui-webcomponents-grids/grids/combined';
typescript

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

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

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

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

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

使用方法

ツリー グリッドはグリッドと多くの機能を共有していますが、データを階層的に表示する機能も追加されています。 ツリー グリッドは、各データ オブジェクトの子コレクションまたは各データ オブジェクトにプライマリキーまたは外部キーを使用してデータ オブジェクト内の関係を定義できます。

ツリー セル

ツリー グリッド階層の構築に使用するオプション (子コレクションまたは主キーまたは外部キー) にかかわらず、ツリー グリッドの行は 2 タイプのセルで構成されます。

• GridCell - 値を含む標準セル。
• TreeGridCell - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。行コンポーネントのレベルは、その内部の treeRow の level プロパティを通じてアクセスできます。

各行にはツリー セルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。

初期展開時の深さ

初期時のツリー グリッドは、すべてのノード レベルを展開して表示します。この動作は ExpansionDepth プロパティを使用して構成できます。デフォルトの値は Infinity ですべてのノードが展開されます。初期時の展開の深さは、このプロパティを数値に設定して制御できます。たとえば、0 はルート レベルのノードのみを表示し、1 はルートレベルと子ノードを表示します。

子コレクション

child collection オプションを使用して各データ オブジェクトは子コレクションを含み、親データ オブジェクトとして同じタイプの項目で生成します。これによりツリー グリッドの各レコードがその子への直接の参照を持つことができます。元のデータ ソースを含むツリー グリッドの data プロパティが階層が定義されたコレクションになります。

このサンプルでは、コレクション ストラクチャを使用します。

const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            // ...
        ]
    },
    // ...
]
typescript

それでは、Data コレクションをインポートし、それをツリー グリッドにバインドすることから始めましょう。

<igc-tree-grid auto-generate="false" id="treeGrid" name="treeGrid">
    <igc-column field="name" header="Name" data-type="string"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date"></igc-column>
    <igc-column field="age" header="Age" data-type="number"></igc-column>
</igc-tree-grid>
html

    constructor() {
        var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        treeGrid.childDataKey = "Employees";
        treeGrid.data = this.employeesNestedData;
    }
ts

ツリー グリッドで階層を構築するには、その childDataKey プロパティに、各データ オブジェクトで使用される子コレクションの名前を設定する必要があります。このサンプルでは Employees コレクションです。 更に自動列生成を無効にしてデータ オブジェクトの実際のプロパティとの一致を手動で定義できます。Employees コレクションが階層で自動的に使用されるため、列定義に含める必要はありません。

rowSelection および paging プロパティを使用して、ツリー グリッドの行選択およびページング機能を有効にできるようになりました。 最初の列に集計機能、各列にはフィルタリング、ソート、編集、サイズ変更機能を有効にします。

<igc-tree-grid auto-generate="false" id="treeGrid" child-data-key="Employees" row-selection="multiple" allow-filtering="true" moving="true">
    <igc-column field="name" header="Name" data-type="string" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="age" header="Age" data-type="number" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-paginator></igc-paginator>
</igc-tree-grid>
html

最後に、IgcGridToolbar、IgcGridToolbarHiding、IgcGridToolbarPinning、IgcGridToolbarExporter をそれぞれ使用して、列の非表示、列のピン固定、エクスポート機能、およびツリー グリッドのツールバーを有効にできます。

<igc-tree-grid auto-generate="false" id="treeGrid" name="treeGrid" child-data-key="Employees" row-selection="multiple" allow-filtering="true" moving="true">
    <igc-column field="name" header="Name" data-type="string" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date" sortable="true" resizable="true" editable="true"></igc-column>
    <igc-column field="age" header="Age" data-type="number" sortable="true" resizable="true" editable="true"></igc-column>
    <igc-paginator></igc-paginator>
    <igc-grid-toolbar>
        <igc-grid-toolbar-title> Employees </igc-grid-toolbar-title>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding> </igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning> </igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter export-csv="true" export-excel="true"> </igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-tree-grid>
html

上記のコードの結果は、この記事の冒頭のツリー グリッドの例セクションで確認できます。

プライマリと外部キー

プライマリと外部キーオプションを使用した際に各データ オブジェクトはプライマリキーと外部キーを含みます。プライマリキーは現在のデータ オブジェクトの一意識別子、外部キーは親の一意識別子です。元のデータ ソースを含むツリー グリッドの data プロパティがフラット コレクションになります。

const data = [
    { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
    { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
    { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
    { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
    { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
    { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
    { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
    { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
    { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
    { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
];
typescript

上記のサンプル データでは、すべてのレコードに ID、ParentID、および Name、JobTitle、Age などの追加プロパティがあります。前述のように、レコードの ID は一意である必要があります。これが PrimaryKey になります。ParentID には親ノードの ID が含まれており、ForeignKey として設定できます。行にツリー グリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。

親子関係は、ツリー グリッドの PrimaryKey プロパティと ForeignKey プロパティを使用して構成されます。

上記フラット コレクションで定義されたデータを表示するツリー グリッドを設定する方法を示すコンポーネントのテンプレートです。

 <igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID" allow-filtering="true" moving="true" row-selection="multiple">
    <igc-column field="Name" data-type="string"></igc-column>
    <igc-column field="JobTitle" header="Job Title"></igc-column>
    <igc-column field="Age" data-type="number"></igc-column>
</igc-tree-grid>
html

さらに、rowSelection プロパティを使用してツリー グリッドの行選択機能を有効にし、各列のフィルタリング、ソート、編集、移動、サイズ変更機能も有効にします。

 <igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID" allow-filtering="true" moving="true" row-selection="multiple">
    <igc-column field="Name" data-type="string" sortable="true" editable="true" resizable="true"> </igc-column>
    <igc-column field="JobTitle" header="Job Title" data-type="string" sortable="true" editable="true" resizable="true"> </igc-column>
    <igc-column field="Age" data-type="number" sortable="true" editable="true" resizable="true"> </igc-column>
</igc-tree-grid>
html

以下は結果です:

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesFlatDataItem {
    public constructor(init: Partial<EmployeesFlatDataItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDataItem(
                {
                    Age: 55,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    Phone: `0251-031259`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Development Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 42,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    Phone: `(21) 555-0091`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `CEO`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 49,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    Phone: `(071) 23 67 22 20`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `Accounting Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 61,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    Phone: `(21) 555-0091`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Localization Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 43,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    Phone: `0452-076545`,
                    OnPTO: true,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 29,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    Phone: `(14) 555-8122`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 31,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    Phone: `7675-3425`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Software Development Team Lead`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 35,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    Phone: `0695-34 67 21`,
                    OnPTO: true,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    Phone: `981-443655`,
                    OnPTO: false,
                    ParentID: 4,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    Phone: `(2) 283-2951`,
                    OnPTO: true,
                    ParentID: 4,
                    Title: `Vice President`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    Phone: `981-443655`,
                    OnPTO: true,
                    ParentID: 5,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 18,
                    Title: `Senior Accountant`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 50,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    Phone: `035-640230`,
                    OnPTO: false,
                    ParentID: 10,
                    Title: `Senior Localization Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 27,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    Phone: `0342-023176`,
                    OnPTO: true,
                    ParentID: 10,
                    Title: `Senior Localization`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    Phone: `069-0245984`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    Phone: `(91) 745 6200`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    Phone: `069-0245984`,
                    OnPTO: true,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesFlatData;
        }
        this._bind();
    }

    private _employeesFlatData: EmployeesFlatData = null;
    public get employeesFlatData(): EmployeesFlatData {
        if (this._employeesFlatData == null)
        {
            this._employeesFlatData = new EmployeesFlatData();
        }
        return this._employeesFlatData;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID"
        allow-filtering="true"
        moving="true"
        row-selection="multiple">
            <igc-column
            field="Name"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Title"
            header="Job Title"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

パーシステンスとインテグレーション

ツリー グリッド セルのインデントは、フィルタリング、ソート、ページングなど他のツリー グリッド全体の機能で永続化されます。

• Sorting が列に適用された際にデータ行がレベルごとにソートされます。ルートレベルの行はそれぞれの子に関係なく個々に並べ替えられます。各子コレクションは個々に並べ替えられます。
• 最初の列 (VisibleIndex が 0 の列) は常にツリー列です。
• 列のピン固定、列の非表示、列の移動などの処理後に VisibleIndex が 0 になる列はツリー列になります。
• エクスポートした Excel ワークシートは、ツリー グリッドでグループ化されるときにレコードをグループ化して階層に反映できます。すべてのレコードを展開した状態が保持および反映されます。
• CSV レベルにエクスポートする際に展開した状態は無視されてすべてのデータがフラットでエクスポートされます。

Web Components ツリー グリッド スタイル設定の構成

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

<igc-tree-grid class="tree-grid">
ts

次に、そのクラスに関連する CSS プロパティを設定します。

.tree-grid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}
css

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesNestedDataItem {
    public constructor(init: Partial<EmployeesNestedDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public Name: string;
    public Title: string;
    public Employees: EmployeesNestedDataItem_EmployeesItem[];

}
export class EmployeesNestedDataItem_EmployeesItem {
    public constructor(init: Partial<EmployeesNestedDataItem_EmployeesItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Title: string;

}
export class EmployeesNestedData extends Array<EmployeesNestedDataItem> {
    public constructor(items: Array<EmployeesNestedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesNestedDataItem(
                {
                    ID: 1,
                    Age: 55,
                    Salary: 80000,
                    Productivity: 90,
                    City: `Berlin`,
                    Country: `Germany`,
                    Phone: `609-202-505`,
                    HireDate: `2008-03-20`,
                    Name: `John Winchester`,
                    Title: `Development Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 4,
                    Age: 42,
                    Salary: 90000,
                    Productivity: 80,
                    City: `Kielce`,
                    Country: `Poland`,
                    Phone: `609-202-505`,
                    HireDate: `2014-01-22`,
                    Name: `Ana Sanders`,
                    Title: `CEO`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 44,
                            Salary: 80000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-202-505`,
                            HireDate: `2014-04-04`,
                            ID: 14,
                            Name: `Laurence Johnson`,
                            Title: `Director`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 25,
                            Salary: 85000,
                            Productivity: 55,
                            City: `Paris`,
                            Country: `France`,
                            Phone: `609-202-505`,
                            HireDate: `2017-11-09`,
                            ID: 5,
                            Name: `Elizabeth Richards`,
                            Title: `Vice President`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 39,
                            Salary: 88000,
                            Productivity: 88,
                            City: `London`,
                            Country: `UK`,
                            Phone: `609-202-505`,
                            HireDate: `2010-03-22`,
                            ID: 13,
                            Name: `Trevor Ashworth`,
                            Title: `Director`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 18,
                    Age: 49,
                    Salary: 77000,
                    Productivity: 70,
                    City: `Manchester`,
                    Country: `UK`,
                    Phone: `222-555-577`,
                    HireDate: `2014-01-22`,
                    Name: `Victoria Lincoln`,
                    Title: `Senior Accountant`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 23,
                            Name: `Thomas Burke`,
                            Title: `Senior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 22,
                            Name: `Michael Anderson`,
                            Title: `Junior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 21,
                            Name: `Roland Reyes`,
                            Title: `Accountant Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 24,
                            Name: `Monica Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 61,
                    Salary: 85000,
                    Productivity: 890,
                    City: `Lyon`,
                    Country: `France`,
                    Phone: `259-266-887`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Localization Developer`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 35,
                    Age: 35,
                    Salary: 75000,
                    Productivity: 75,
                    City: `Warasw`,
                    Country: `Poland`,
                    Phone: `688-244-844`,
                    HireDate: `2014-01-22`,
                    Name: `Janine Munoz`,
                    Title: `HR`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 49,
                    Salary: 95000,
                    Productivity: 80,
                    City: `Krakow`,
                    Country: `Poland`,
                    Phone: `677-266-555`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Sales Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesNestedData;
        }
        this._bind();
    }

    private _employeesNestedData: EmployeesNestedData = null;
    public get employeesNestedData(): EmployeesNestedData {
        if (this._employeesNestedData == null)
        {
            this._employeesNestedData = new EmployeesNestedData();
        }
        return this._employeesNestedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        child-data-key="Employees">
            <igc-column
            field="Name"
            header="Name"
            data-type="string">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date">
            </igc-column>
            <igc-column
            field="Age"
            header="Age"
            data-type="number">
            </igc-column>
            <igc-column
            field="salary"
            header="Salary"
            data-type="number">
            </igc-column>
            <igc-column
            field="productivity"
            header="Productivity"
            data-type="number">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#treeGrid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}

cssコピー

Edit in: Codesandbox

API リファレンス

• IgcTreeGridComponent
• IgcColumnComponent
• IgcGridToolbar
• IgcTreeGridRecord

その他のリソース

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

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)