Web Components Data Grid 概要

    Ignite UI for Web Components Data Table / Data Grid は、表形式の Web Components コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。Web Components の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。Web Components データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。

    Web Components Data Grid の例

    このデモは、グリッドで利用可能な機能のいくつかを実装しています: フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。

    作業の開始

    依存関係

    Web Components Grid のパッケージをインストールするときに core パッケージもインストールする必要があります。

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

    モジュールの要件

    IgcDataGridComponent を作成するには、以下のモジュールが必要です。

    import { ModuleManager } from 'igniteui-webcomponents-core';
    import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
    import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
    
    ModuleManager.register(
        IgcDataGridModule
    );
    

    オプションのモジュール

    上記のオプションの IgcDataGridComponent 機能を使用するには、以下のモジュールが必要です。

    import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
    import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-grids';
    import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-grids';
    import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-grids';
    import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
    import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
    
    ModuleManager.register(
        IgcGridColumnOptionsModule,
        IgcDataGridToolbarModule,
        IgcSparklineModule
    );
    

    サンプル データ ソース

    Web Components グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。

        this.data = [{
            Discontinued: false,
            OrderDate: new Date("2012-02-12"),
            ProductID: 1,
            ProductName: "Chai",
            QuantityPerUnit: "10 boxes x 20 bags",
            ReorderLevel: 10,
            UnitPrice: 18.0000,
            UnitsInStock: 39
        }, {
            Discontinued: false,
            OrderDate: new Date("2003-03-17"),
            ProductID: 2,
            ProductName: "Chang",
            QuantityPerUnit: "24 - 12 oz bottles",
            ReorderLevel: 25,
            UnitPrice: 19.0000,
            UnitsInStock: 17
        }, {
            Discontinued: false,
            OrderDate: new Date("2006-03-17"),
            ProductID: 3,
            ProductName: "Aniseed Syrup",
            QuantityPerUnit: "12 - 550 ml bottles",
            ReorderLevel: 25,
            UnitPrice: 10.0000,
            UnitsInStock: 13
        }, {
            Discontinued: false,
            OrderDate: new Date("2016-03-17"),
            ProductID: 4,
            ProductName: "Chef Antony Cajun Seasoning",
            QuantityPerUnit: "48 - 6 oz jars",
            ReorderLevel: 0,
            UnitPrice: 22.0000,
            UnitsInStock: 53
        }, {
            Discontinued: true,
            OrderDate: new Date("2011-11-11"),
            ProductID: 5,
            ProductName: "Chef Antony Gumbo Mix",
            QuantityPerUnit: "36 boxes",
            ReorderLevel: 0,
            UnitPrice: 21.3500,
            UnitsInStock: 0
        }];
    

    列の自動生成

    以下のコードは、Web Components データ グリッドを上記のローカルデータにバインドする方法を示しています。

    <igc-data-grid id="grid"
          height="100%"
          width="100%"
          auto-generate-columns="true"
          default-column-min-width="100"
          summary-scope="Root"
          is-column-options-enabled="true"
          is-group-collapsable="true"
          group-summary-display-mode="RowBottom"
          column-moving-mode="Deferred"
          column-moving-animation-mode="SlideOver"
          column-moving-separator-width="2"
          column-showing-animation-mode="slideFromRightAndFadeIn"
          column-hiding-animation-mode="slideToRightAndFadeOut"
          selection-mode="SingleRow"
          corner-radius-top-left="0"
          corner-radius-top-right="0">
    </igc-data-grid>
    
    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
    grid1.dataSource = data;
    

    列の手動定義

    <igc-data-grid id="grid"
        width="100%"
        height="500px"
        auto-generate-columns="false">
            <igc-numeric-column field="ProductID" header-text="Product ID"></igc-numeric-column>
            <igc-text-column field="ProductName" header-text="Product Name"></igc-text-column>
            <igc-text-column field="QuantityPerUnit" header-text="Quantity Per Unit"></igc-text-column>
            <igc-numeric-column field="UnitsInStock" header-text="Units In Stock"></igc-numeric-column>
            <igc-date-time-column field="OrderDate" header-text="Order Date"></igc-date-time-column>
    </igc-data-grid>
    
    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
    grid1.dataSource = data;
    

    列のスタイル設定

    次のコードは、提供された列のプロパティを使用して特定の列のスタイルを設定する方法を示しています。

    <igc-text-column
        background="SkyBlue"
        text-style="Italic Bold 16pt Times New Roman"
    ></igc-text-column>
    

    その他のリソース

    API メンバー